直播商城源码，验证码 获取码输入框实现
功能实现及原理
输入格-自动切换
实现对每个input输入框操作
利用定时器和标记
代码实现
/**
* 输入框及光标
*/
const firstFocus = ref(true)
const secondFocus = ref(false)
const thirdFocus = ref(false)
const fourFocus = ref(false)
const fiveFocus = ref(false)
const sixFocus = ref(false)
//记录输入的值
const inputValue = ref<[any]>([-1])
function focus() {
firstFocus.value = true;
}
// 第一个文本框 change 事件
function firstChange(e: any) {
initialization();
if (e.detail.keyCode == 8) {
firstFocus.value = true
} else {
setTimeout(() => {
secondFocus.value = true;
}, 100)
}
inputValue.value.push(e.detail)
}
// 第二个文本框 change 事件
function secondChange(e: any) {
initialization();
if (e.detail.keyCode == 8) {
firstFocus.value = true
} else {
setTimeout(() => {
thirdFocus.value = true;
}, 100)
}
inputValue.value.push(e.detail)
}
// 第三个文本框 change 事件
function thirdChange(e: any) {
initialization();
if (e.detail.keyCode == 8) {
secondFocus.value = true
} else {
setTimeout(() => {
fourFocus.value = true;
}, 100)
}
inputValue.value.push(e.detail)
}
// 第四个文本框 change 事件
function fourChange(e: any) {
initialization();
if (e.detail.keyCode == 8) {
thirdFocus.value = true
} else {
setTimeout(() => {
fiveFocus.value = true;
}, 100)
}
inputValue.value.push(e.detail)
}
// 第五个文本框 change 事件
function fiveChange(e: any) {
initialization();
if (e.detail.keyCode == 8) {
fourFocus.value = true
} else {
setTimeout(() => {
sixFocus.value = true;
}, 100)
}
inputValue.value.push(e.detail)
}
// 第六个文本框 change 事件
function sixthChange(e: any) {
if (e.detail.keyCode == 8) {
setTimeout(() => {
sixFocus.value = true;
}, 100)
}
initialization();
inputValue.value.push(e.detail)
//打印看输入的值串
console.log("----222", inputValue.value)
}
// 初始化所有焦点变量
function initialization() {
firstFocus.value = false;
secondFocus.value = false;
thirdFocus.value = false;
fourFocus.value = false;
fiveFocus.value = false;
sixFocus.value = false;
}
/**
* 初始化
*/
onActivated(() => {
initialization()
focus()
})
</script>
<template>
<view>
<view>
<view>请输入订单号后六位</view>
<view>手机查看美团订单号后六位</view>
</view>
<view>
<van-field type="number" maxlength="1"
:style="firstFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
@focus='focus' :focus="firstFocus" @input="firstChange" input-align="center" />
<van-field type="number" maxlength="1"
:style="secondFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="secondFocus" @input='secondChange' input-align="center" />
<van-field type="number" maxlength="1"
:style="thirdFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="thirdFocus" @input='thirdChange' input-align="center" />
<van-field type="number" maxlength="1"
:style="fourFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="fourFocus" @input='fourChange' input-align="center" />
<van-field type="number" maxlength="1"
:style="fiveFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="fiveFocus" @input='fiveChange' input-align="center" />
<van-field type="number" maxlength="1"
:style="sixFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
:focus="sixFocus" @input='sixthChange' input-align="center" />
</view>
</view>
</template>
<style scoped>
.layout {
display: flex;
flex-direction: column;
}
.input-content {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
margin: 0 46rpx 0 46rpx;
margin-top: 100rpx;
background: #ffffff;
}
.top-view {
align-items: left;
@extend .layout
}
.title {
margin-top: 100rpx;
margin-left: 48rpx;
font-size: 48rpx;
color: #333333;
}
.describe {
font-size: 28rpx;
color: #A3A5A7;
margin-left: 48rpx;
margin-top: 14rpx;
}
</style>
<style>
.mt-code {
.field-custom {
margin: 0 8rpx 0 8rpx;
:deep(.van-cell) {
width: 96rpx;
height: 96rpx;
border-radius: 16rpx;
background: #F7F8F9;
font-size: 48rpx;
color: #333333;
}
}
}
</style>
以上就是 直播商城源码，验证码 获取码输入框实现，更多内容欢迎关注之后的文章