uniapp 多个input输入完成自动切换到下一个输入框
uni-app 实现表单项“下一项”
<template>
<view class="phone-num-input-box u-flex u-row-between">
<!-- <view class="uni-form-item uni-column">
<view class="title">可自动聚焦的input</view>
<input type="text" class="uni-input" :focus="focus" adjust-position="false" auto-blur="true"
placeholder="自动获得焦点" />
</view> -->
<!-- <input v-model="a" type="text" confirm-type="next" @confirm="moveNext('b')" placeholder="测试" />
<input v-model="b" :focus="focusList" placeholder="测试2" />
<input v-model="c" :focus="focusList" placeholder="测试3" /> -->
<!-- confirm-type="next" 键盘 -->
<view v-for="(item,index) in phone_num" :key="index">
<input confirm-type="next" maxlength="10" v-model="phone_num[index]" :id="'input-'+ index"
:focus="focus_index == index" autocomplete="off" autocapitalize="off" autocorrect="off"
@keyup.delete="funDeletePhoneNum" @confirm="moveNextlll(index)" @focus="funFocusInput"
placeholder="键盘右下角按钮显示为下一个">
</view>
</view>
</template>
<script>
export default {
data() {
return {
focus: false,
msg: "",
focus_index: -1,
phone_num: {
0: '',
1: '',
2: '',
3: '',
4: '',
5: '',
6: '',
7: '',
8: '',
9: '',
10: ''
},
a: '',
b: '',
c: '',
focusList: {
b: false,
}
}
},
methods: {
moveNext(dom) {
this.focusList[dom] = true;
},
moveNextlll(index) {
this.focus_index = Number(index) + 1
console.log(this.focus_index, 777)
},
funDeletePhoneNum(e) {
var index = (e.target.id).replace('input-', '');
if (this.phone_num[index] == '' && index > 1) {
this.focus_index = Number(index) - 1;
}
},
funFocusInput(e) {
var index = (e.target.id).replace('input-', '');
if (this.phone_num[index] != '') {
this.phone_num[index] = '';
}
},
focusClick() {
this.focus = true
},
inputFocus(e, height) {
console.log(e)
},
inputCode(e) {
let value = e.detail.value
this.code = value
},
}
}
</script>
<style lang="scss" scoped>
.index {
padding: 30rpx;
.content {
padding: 20rpx;
.phone-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.phone-input {
width: calc(100% - 240rpx);
padding: 16rpx;
border-bottom: 1rpx solid #eee;
}
.get-code {
text-align: center;
width: 170rpx;
font-size: 26rpx;
border-radius: 50rpx;
padding: 10rpx 0rpx;
background: #3c9cff;
color: #fff;
}
}
}
}
</style>