之前在“掘金”上看到這樣一個demo 我覺得很有意思,於是今天把它搬下來,記在自己的“小本本”裡
也許會對以後的項目有點用,若要自己去實現這樣一個案例也能實現,但是可能沒有那麼“妙”。
想法:
1、使用label標籤做顯示驗證碼的框,
2、然後每個label for屬性指向同一個 id 為vcode 的input,
3、為了能夠觸發input焦點, 將input 改透明度樣式隱藏,
4、這樣就實現了 點擊label觸發 input焦點,調用鍵盤。
運行效果:
示例代碼:
結構部分html:
驗證碼:
css部分:
Javascript部分
1、通過CDN引入vue.js
2、代碼
var app = new Vue({ el: '#app', data: { code: '', codeLength: 6, telDisabled: false, focused: false }, computed: { codeArr() { return this.code.split('') }, cursorIndex() { return this.code.length } }, watch: { code(newVal) { this.code = newVal.replace(/[^d]/g,'') if (newVal.length > 5) { // this.telDisabled = true this.$refs.vcode.blur() setTimeout(() => { alert(`vcode: ${this.code}`) }, 500) } } }, })
[retouched ] JS如何實現手機端輸入驗證碼效果已經有392次圍觀