直播商城源码，验证码获取码输入框实现

功能实现及原理

输入格-自动切换

实现对每个input输入框操作

利用定时器和标记

代码实现

/**<br> * 输入框及光标<br> */<br>const firstFocus = ref(true)<br>const secondFocus = ref(false)<br>const thirdFocus = ref(false)<br>const fourFocus = ref(false)<br>const fiveFocus = ref(false)<br>const sixFocus = ref(false)<br>//记录输入的值<br>const inputValue = ref<[any]>([-1])<br>function focus() {<br>    firstFocus.value = true;<br>}<br>// 第一个文本框 change 事件<br>function firstChange(e: any) {<br>    initialization();<br>    if (e.detail.keyCode == 8) {<br>        firstFocus.value = true<br>    } else {<br>        setTimeout(() => {<br>            secondFocus.value = true;<br>        }, 100)<br>    }<br>    inputValue.value.push(e.detail)<br>}<br>// 第二个文本框 change 事件<br>function secondChange(e: any) {<br>    initialization();<br>    if (e.detail.keyCode == 8) {<br>        firstFocus.value = true<br>    } else {<br>        setTimeout(() => {<br>            thirdFocus.value = true;<br>        }, 100)<br>    }<br>    inputValue.value.push(e.detail)<br>}<br>// 第三个文本框 change 事件<br>function thirdChange(e: any) {<br>    initialization();<br>    if (e.detail.keyCode == 8) {<br>        secondFocus.value = true<br>    } else {<br>        setTimeout(() => {<br>            fourFocus.value = true;<br>        }, 100)<br>    }<br>    inputValue.value.push(e.detail)<br>}<br>// 第四个文本框 change 事件<br>function fourChange(e: any) {<br>    initialization();<br>    if (e.detail.keyCode == 8) {<br>        thirdFocus.value = true<br>    } else {<br>        setTimeout(() => {<br>            fiveFocus.value = true;<br>        }, 100)<br>    }<br>    inputValue.value.push(e.detail)<br>}<br>// 第五个文本框 change 事件<br>function fiveChange(e: any) {<br>    initialization();<br>    if (e.detail.keyCode == 8) {<br>        fourFocus.value = true<br>    } else {<br>        setTimeout(() => {<br>            sixFocus.value = true;<br>        }, 100)<br>    }<br>    inputValue.value.push(e.detail)<br>}<br>// 第六个文本框 change 事件<br>function sixthChange(e: any) {<br>    if (e.detail.keyCode == 8) {<br>        setTimeout(() => {<br>            sixFocus.value = true;<br>        }, 100)<br>    }<br>    initialization();<br>    inputValue.value.push(e.detail)<br>    //打印看输入的值串<br>    console.log("----222", inputValue.value)<br>}<br>// 初始化所有焦点变量<br>function initialization() {<br>    firstFocus.value = false;<br>    secondFocus.value = false;<br>    thirdFocus.value = false;<br>    fourFocus.value = false;<br>    fiveFocus.value = false;<br>    sixFocus.value = false;<br>}<br>/**<br> * 初始化<br> */<br>onActivated(() => {<br>    initialization()<br>    focus()<br>})<br></script><br><template><br>    <view><br>        <view><br>            <view>请输入订单号后六位</view><br>            <view>手机查看美团订单号后六位</view><br>        </view><br>        <view><br>            <van-field type="number" maxlength="1"<br>                :style="firstFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"<br>                @focus='focus' :focus="firstFocus" @input="firstChange" input-align="center" /><br>            <van-field type="number" maxlength="1"<br>                :style="secondFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"<br>                :focus="secondFocus" @input='secondChange' input-align="center" /><br>            <van-field type="number" maxlength="1"<br>                :style="thirdFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"<br>                :focus="thirdFocus" @input='thirdChange' input-align="center" /><br>            <van-field type="number" maxlength="1"<br>                :style="fourFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"<br>                :focus="fourFocus" @input='fourChange' input-align="center" /><br>            <van-field type="number" maxlength="1"<br>                :style="fiveFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"<br>                :focus="fiveFocus" @input='fiveChange' input-align="center" /><br>            <van-field type="number" maxlength="1"<br>                :style="sixFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"<br>                :focus="sixFocus" @input='sixthChange' input-align="center" /><br>        </view><br>    </view><br></template><br><style scoped><br>.layout {<br>    display: flex;<br>    flex-direction: column;<br>}<br>.input-content {<br>    display: flex;<br>    justify-content: center;<br>    align-content: center;<br>    align-items: center;<br>    margin: 0 46rpx 0 46rpx;<br>    margin-top: 100rpx;<br>    background: #ffffff;<br>}<br>.top-view {<br>    align-items: left;<br>    @extend .layout<br>}<br>.title {<br>    margin-top: 100rpx;<br>    margin-left: 48rpx;<br>    font-size: 48rpx;<br>    color: #333333;<br>}<br>.describe {<br>    font-size: 28rpx;<br>    color: #A3A5A7;<br>    margin-left: 48rpx;<br>    margin-top: 14rpx;<br>}<br></style><br><style><br>.mt-code {<br>    .field-custom {<br>        margin: 0 8rpx 0 8rpx;<br>        :deep(.van-cell) {<br>            width: 96rpx;<br>            height: 96rpx;<br>            border-radius: 16rpx;<br>            background: #F7F8F9;<br>            font-size: 48rpx;<br>            color: #333333;<br>        }<br>    }<br>}<br></style>