话不多说,这是我通过网上的经验以及结合自己的想法写出来的,我是新手程序猿,还请不要喷!
直接先给大家看一下效果图:
如键盘被隐藏,可直接点击蓝框弹出键盘,蓝框就相当于input的光标,验证码输入错误之后会将字体以及边框改为红色,持续1.5s(可自行修改时间),然后清空数据。
实现思路:创建六个正方形的view(使用for循环),然后创建一个数字input,最大输入长度为六位(根据验证码的长度),再将input隐藏掉,获取到的值分别放到六个view中。
其中验证码验证失败之后利用v-model双向绑定进行清空已经输入的值
完整的代码如下:
这是html代码,class类名起的比较随意(忽略)
<view class="code">
<view class="code-tip-one">请输入验证码
<view class="code-tip">已向<text>+86 xxxxxxxxxxx</text>发送验证码</view>
<view class="code-errow" v-if="codeclolor == '#ff0000'">验证码输入错误</view>
</view>
<input class="cinput" adjust-position="false" auto-blur="true" @blur="blur" @input="codenum" :focus="focus"
value="code" v-model="code" type="number" maxlength="6" />
<view class="code-input">
<view v-for="(item,index) in 6" :key="index" @click="codefocus(index)"
:style='(index == code.length? "border: 5rpx solid #1195db;width: 80rpx;height: 80rpx;line-height: 80rpx;":"color: " + codeclolor + ";" +"border: 2rpx solid" + codeclolor)'>
{{code[index]}}
</view>
</view>
<view class="recode">重新发送({{sec}}s)</view>
</view>
这是js代码
data() {
return {
// 验证码输入聚焦
focus: true,//input焦点,用于键盘隐藏后重新唤起
// 验证码框颜色
codeclolor: "#313131",//自定义光标的颜色
// 验证码获取秒数
sec: '50',//这是重新获取验证码的倒计时
code: '',//这是用户输入的验证码
}
},
methods: {
// 输入验证码
codenum: function(event) {
var that = this
var code = event.target.value
that.code = code
if (code.length == 6) {
if (code == '123456') {
//输入六位验证码后自动进行验证并执行验证成功的函数
} else {
that.codeclolor = "#ff0000"
setTimeout(function() {
that.code = ""
event.target.value = ""
that.codeclolor = "#313131"
}, 1500)
}
}
},
// 键盘隐藏后设置失去焦点
blur: function() {
var that = this
that.focus = false
},
// 点击自定义光标显示键盘
codefocus: function(e) {
var that = this
if (e == that.code.length) {
that.focus = true
}
},
}
这是css代码
.code {
margin: auto;
margin-top: 50rpx;
width: 650rpx;
height: auto;
}
.code-tip-one {
width: 650rpx;
height: 250rpx;
line-height: 100rpx;
font-size: 60rpx;
font-weight: bold;
color: #313131;
}
.code-tip {
width: 650rpx;
height: 100rpx;
line-height: 50rpx;
font-size: 30rpx;
font-weight: normal;
color: #8a8a8a;
}
.code-errow {
width: 650rpx;
height: 50rpx;
line-height: 25rpx;
font-size: 28rpx;
font-weight: normal;
color: #ff0000;
}
.code-tip>text {
padding: 0 20rpx;
width: 650rpx;
font-size: 30rpx;
font-weight: normal;
color: #ff5500;
}
.code-input {
margin: auto;
width: 650rpx;
height: 100rpx;
display: flex;
}
.code-input>view {
margin-top: 5rpx;
margin-left: 15rpx;
width: 86rpx;
height: 86rpx;
line-height: 86rpx;
font-size: 60rpx;
font-weight: bold;
color: #313131;
text-align: center;
border-radius: 10rpx;
}
.code-input>view:nth-child(1) {
margin-left: 0rpx;
}
.cinput {
position: fixed;
left: -100rpx;
width: 50rpx;
height: 50rpx;
}
.recode{
margin-top: 20rpx;
width: 200rpx;
height: 80rpx;
line-height: 80rpx;
color: #707070;
font-size: 28rpx;
}
如果觉得不错的话,麻烦点个赞哦,感谢!