php 验证码输入框,在vue中如何实现验证码输入框组件

最近做项目遇到这样的需求要求输入4位或6位短信验证码，输入完成后收起键盘。实现步骤大家参考下本文

先来看波完成效果图

需求

输入4位或6位短信验证码，输入完成后收起键盘

实现步骤

第一步

布局排版

• {{value[index] || placeholder}}

id="code" name="code" type="tel" :maxlength="number"

autocorrect="off" autocomplete="off" autocapitalize="off">

使用li元素来模拟输入框的显示，没有别的目的，就只是为了语义化，当然你也可以使用其他任意一个元素来模拟，比如p。

使用label标签的好处在于它可以跟input的click事件关联上，一方面实现了语义化解决方案，另一方面也省去了我们通过js来唤起虚拟键盘。

隐藏输入框.input-code {

position: absolute;

left: -9999px;

top: -99999px;

width: 0;

height: 0;

opacity: 0;

overflow: visible;

z-index: -1;

}

将真实的输入框定位到屏幕可视区域以外的地方，虚拟键盘被唤起时，就不会将页面往上顶了。所以你的验证码输入组件一定要放在虚拟键盘遮挡不了的地方。

第二步

处理验证码输入handleSubmit() {

this.$emit('input', this.value)

},

handleInput(e) {

this.$refs.input.value = this.value

if (this.value.length >= this.number) {

this.hideKeyboard()

}

this.handleSubmit()

}

输入时，给输入框赋一次值，是为了解决android端上输入框失焦后重新聚焦，输入光标会定在第一位的前面，经过赋值再聚焦，光标的位置就会显示在最后一位后面。

第三步

完成输入后关闭虚拟键盘hideKeyboard() {

// 输入完成隐藏键盘

document.activeElement.blur() // ios隐藏键盘

this.$refs.input.blur() // android隐藏键盘

}

组件完整代码

• {{value[index] || placeholder}}

id="code" name="code" type="tel" :maxlength="number"

autocorrect="off" autocomplete="off" autocapitalize="off">

export default {

name: 'SecurityCode',

// component properties

props: {

number: {

type: Number,

default: 4

},

placeholder: {

type: String,

default: '-'

}

},

// variables

data() {

return {

value: ''

}

},

methods: {

hideKeyboard() {

// 输入完成隐藏键盘

document.activeElement.blur() // ios隐藏键盘

this.$refs.input.blur() // android隐藏键盘

},

handleSubmit() {

this.$emit('input', this.value)

},

handleInput(e) {

this.$refs.input.value = this.value

if (this.value.length >= this.number) {

this.hideKeyboard()

}

this.handleSubmit()

}

}

}

.security-code-wrap {

overflow: hidden;

}

.security-code-container {

margin: 0;

padding: 0;

display: flex;

justify-content: center;

.field-wrap {

list-style: none;

display: block;

width: 40px;

height: 40px;

line-height: 40px;

font-size: 16px;

background-color: #fff;

margin: 2px;

color: #000;

.char-field {

font-style: normal;

}

}

}

.input-code {

position: absolute;

left: -9999px;

top: -99999px;

width: 0;

height: 0;

opacity: 0;

overflow: visible;

z-index: -1;

}

组件使用代码

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：