微信移動端4位、6位、多位驗證碼密碼輸入框功能的實現代碼，實現思路：

方案1：

寫一個簡單的input框。

評估：樣式不好看，待定。

?

方案2：

就是用6個input框，每輸入一個數字之后，切換到下一個input，即切換focus，刪除的時候，同理。自測發現安卓機很流暢，但ios微信端并不是那么流暢，ios默認輸入法輸入也有點瑕疵。

評估：感嘆一下萬能的安卓，吐槽下wechat里ios版本更新慢，該方案可能要pass。

方案3：

用6個span標簽。即放置一個輸入框，隱藏其文字和位置，label>span*6。

評估：解決了絕大多數問題，很多公司都是類似的方案。

最終結果：
由于工程緊迫項目小，還考慮到一些其他外部原因，我們美麗的產品大人拍板了第一種方案。雖說兜兜轉轉又回到了圓點，但是大人給我的啟發實實不可忽略。

?

下面是我開Vue工程，打的demo：

demo

下面是Vue工程demo代碼：

Vue組件代碼：template內容： <template><div class="input-captcha-20190115"><h3>栗子1：簡單的input框</h3><div class="input-box"><input v-model.trim="simpleInput0" type="number" placeholder="請輸入六位數字驗證碼"></div><br><br><h3>栗子2：由六個span代替輸入框</h3><div class="input-box"><div class="tips">用六個span代替輸入框：</div><label class="simple-input-content" for="simpleInput1"><span class="highlight">{{simpleInput1.slice(0,1)}}</span><span :class="simpleInput1.length > 1?'highlight':''">{{simpleInput1.slice(1,2)}}</span><span :class="simpleInput1.length > 2?'highlight':''">{{simpleInput1.slice(2,3)}}</span><span :class="simpleInput1.length > 3?'highlight':''">{{simpleInput1.slice(3,4)}}</span><span :class="simpleInput1.length > 4?'highlight':''">{{simpleInput1.slice(4,5)}}</span><span :class="simpleInput1.length > 5?'highlight':''">{{simpleInput1.slice(5,6)}}</span></label><div class="tips">要隱藏的輸入框：</div><input id="simpleInput1" v-model.trim="simpleInput1" type="number" placeholder="請輸入六位數字驗證碼"></div><br><br><h3>栗子3：由六個input組成</h3><div class="input-box"><div class="input-content"><input v-model.trim.number="input0" ref="input0" @keydown.8="deleteValue('input0','input0')" @keyup="changeValue($event,'input0','input1')" type="number" placeholder="空"><input v-model.trim.number="input1" ref="input1" @keydown.8="deleteValue('input1','input0')" @keyup="changeValue($event,'input1','input2')" type="number" placeholder="空"><input v-model.trim.number="input2" ref="input2" @keydown.8="deleteValue('input2','input1')" @keyup="changeValue($event,'input2','input3')" type="number" placeholder="空"><input v-model.trim.number="input3" ref="input3" @keydown.8="deleteValue('input3','input2')" @keyup="changeValue($event,'input3','input4')" type="number" placeholder="空"><input v-model.trim.number="input4" ref="input4" @keydown.8="deleteValue('input4','input3')" @keyup="changeValue($event,'input4','input5')" type="number" placeholder="空"><input v-model.trim.number="input5" ref="input5" @keydown.8="deleteValue('input5','input4')" @keyup="changeValue($event,'input5','input5')" type="number" placeholder="空"></div></div></div> </template> View Template Code

?

Vue組件代碼：script內容： <script> export default {name: 'inputCaptcha',data () {return {simpleInput0: '',simpleInput1: '',input0: '',input1: '',input2: '',input3: '',input4: '',input5: ''}},methods: {deleteValue (inputValue, previousItem) { // 鍵盤按下時$event，當前input，上一個inputconsole.log(this[inputValue], this[previousItem])if (this[inputValue].length > 0) { // 當前有值，清空之this[inputValue] = ''} else { // 當前沒有值，光標跳轉到上一個input，并清空該input值this.$nextTick(() => {this.$refs[previousItem].focus()this[previousItem] = ''this[inputValue] = ''})}},changeValue (e, inputValue, nextItem) { // 鍵盤抬起時$event，當前input，下一個inputconsole.log(e.keyCode, this[inputValue], this[nextItem])if (e.keyCode !== 8) {this.$nextTick(() => {this.$refs[nextItem].focus() // 截取當前值最后一位，跳到下一個inputthis[inputValue] = (this[inputValue]).toString().slice(-1)})}}} } </script> View JavaScript Code

?

Vue組件代碼：style[lang=less]內容： <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="less"> .input-captcha-20190115 {min-height: 200px;.input-box {min-height: 100px;box-shadow: 0 0 5px 1px black;border-radius: 8px;width: 100%;max-width: 500px;display: inline-block;padding: 20px;box-sizing: border-box;input {vertical-align: middle;}& + .input-box {margin-top: 20px;}// 六個span時的樣式.simple-input-content {label {padding: 20px;}span {vertical-align: middle;border: 1px solid silver;display: inline-block;height: 20px;width: 20px;&.highlight {border-color: purple;}}}// 六個input時的樣式.input-content {padding: 20px;input {width: 20px;height: 20px;text-align: center;}}/* 去掉input[type=number]瀏覽器默認的icon顯示 */input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { // chrome-webkit-appearance: none;appearance: none;margin: 0;}input{ // 火狐-moz-appearance:textfield;}} } </style> View Style Code

?

Vue掛載標簽<div id="app20190115"></div>樣式：

<style> #app20190115 {text-align: center;color: #2c3e50;border: 1px solid silver; } .tips {color: #666 } </style>

?

Vue工程demo中的知識點：

1.在Chrome與火狐中，輸入框input類型為number時，如何去除掉的自帶的上下默認箭頭

2.鍵盤按鈕keyCode大全：獲取按鍵對應的鍵值的方法

?

?

轉載于:https://www.cnblogs.com/ziChin/p/10273980.html

總結

以上是生活随笔為你收集整理的手机端实现6位短信验证码input输入框效果（样式及代码方法）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。