移动端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">
<im="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" im="simpleInput1" type="number" placeholder="请输⼊六位数字验证码">
</div>
<br>
<br>
<h3>栗⼦3：由六个input组成</h3>
<div class="input-box">
<div class="input-content">
<im.number="input0" ref="input0" @keydown.8="deleteValue('input0','input0')" @keyup="changeValue($event,'input0','input1')" type="number" placeholder="空"> <im.number="input1" ref="input1" @keydown.8="deleteValue('input1','input0')" @keyup="changeValue($event,'input1','input2')" type="number" placeholder="空"> <im.number="input2" ref="input2" @keydown.8="deleteValue('input2','input1')" @keyup="changeValue($event,'input2','input3')" type="number" placeholder="空"> <im.number="input3" ref="input3" @keydown.8="deleteValue('input3','input2')" @keyup="changeValue($event,'input3','input4')" type="number" placeholder="空"> <im.number="input4" ref="input4" @keydown.8="deleteValue('input4','input3')" @keyup="changeValue($event,'input4','input5')" type="number" placeholder="空"> <im.number="input5" ref="input5" @keydown.8="deleteValue('input5','input4')" @keyup="changeValue($event,'input5','input5')" type="number" placeholder="空"> </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，上⼀个input console.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，下⼀个input console.log(e.keyCode, this[inputValue], this[nextItem])
if (e.keyCode !== 8) {
this.$nextTick(() => {
this.$refs[nextItem].focus() // 截取当前值最后⼀位，跳到下⼀个input
this[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中的知识点：
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议