歡迎您光臨本站 註冊首頁

JS如何實現手機端輸入驗證碼效果

←手機掃碼閱讀     retouched @ 2020-06-04 , reply:0

之前在“掘金”上看到這樣一個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次圍觀

http://coctec.com/docs/javascript/show-post-236900.html