html输⼊框判断位数是否6位,⼿机端实现6位短信验证码input 输⼊框效果（样式及代码⽅。。。
Vue组件代码：template内容：
栗⼦1：简单的input框
栗⼦2：由六个span代替输⼊框
⽤六个span代替输⼊框：
{{simpleInput1.slice(0,1)}}
{{simpleInput1.slice(1,2)}}
{{simpleInput1.slice(2,3)}}
{{simpleInput1.slice(3,4)}}
{{simpleInput1.slice(4,5)}}
{{simpleInput1.slice(5,6)}}
要隐藏的输⼊框：
栗⼦3：由六个input组成
View Template Code
Vue组件代码：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)
})
}
}
}
}
View JavaScript Code
html内容文本框
Vue组件代码：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:;
}
input{ // ⽕狐
-moz-appearance:textfield; }
}
}
View Style Code
Vue挂载标签
#app20190115 {
text-align: center;
color: #2c3e50;
border: 1px solid silver;
}
.tips {
color: #666
}
Vue⼯程demo中的知识点：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。