小程序
小游戏
企业微信
微信支付
扫描小程序码分享
多个输入框，输入完一个自动聚焦下一个，现在采用的两种方式都不行，第一种多个input 通过每个input的length去修改focus，这样会导致键盘闪烁；第二种，写一个隐藏的input，这样虽然可以实现样式效果，但是不能从中间删除，比如6个input我要删除第三个input的值就实现不了，只能从最后一个删除。有大佬给点思路解决一下吗？想了好几天了，跪求
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
有效果可以看吗？
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
还要代码吗
<view class="section3 voliline disflexrow flexbetween alatemcenter">
<input class="fangin" type="number" maxlength="1" bindinput="input1" auto-focus="{{code0}}" focus="{{code0}}" value="{{code1}}" index="1" bindtap="changecode"/>
<input class="fangin" type="number" maxlength="1" bindinput="input2" auto-focus="{{code1}}" focus="{{code1}}" value="{{code2}}" index="2" bindtap="changecode"/>
<input class="fangin" type="number" maxlength="1" bindinput="input3" auto-focus="{{code2}}" focus="{{code2}}" value="{{code3}}" index="3" bindtap="changecode"/>
<input class="fangin" type="number" maxlength="1" bindinput="input4" auto-focus="{{code3}}" focus="{{code3}}" value="{{code4}}" index="4" bindtap="changecode"/>
<input class="fangin" type="number" maxlength="1" bindinput="input5" auto-focus="{{code4}}" focus="{{code4}}" value="{{code5}}" index="5" bindtap="changecode"/>
<input class="fangin" type="number" maxlength="1" bindinput="input6" auto-focus="{{code5}}" focus="{{code5}}" value="{{code6}}" index="6" bindtap="changecode"/>
</view>
input1:function(e){
if (e.detail.keyCode == 8 || e.detail.value==''){
this.setData({ code1: '',code2: '',code3: '',code4: '',code5: '',code6: '', code0: true })
}else{
this.setData({code1: e.detail.value})
}
},
input2: function (e) {
if (e.detail.keyCode == 8 || e.detail.value == '') {
var code2 = this.data.code2;
var code1 = this.data.code1;
if (this.data.code2 != '') {
this.setData({ code2: '',code3: '',code4: '',code5: '',code6: '', code1: code1 })
} else { this.setData({ code1: '', code0:true }) }
} else {
this.setData({ code2: e.detail.value })
input3: function (e) {
if (this.data.code3 != '') {
this.setData({ code3: '',code4: '',code5: '',code6: '', code2: code2 })
} else { this.setData({ code2: '', code1: code1 }) }
this.setData({ code3: e.detail.value })
input4: function (e) {
var code3 = this.data.code3;
if (this.data.code4 != '') {
this.setData({ code4: '',code5: '',code6: '', code3: code3 })
} else { this.setData({ code3: '', code2: code2 }) }
this.setData({ code4: e.detail.value })
input5: function (e) {
var code4 = this.data.code4;
if (this.data.code5 != '') {
this.setData({ code5: '',code6: '', code4: code4 })
} else { this.setData({ code4: '', code3: code3 }) }
this.setData({ code5: e.detail.value })
input6: function (e) {
var code5 = this.data.code5;
if (this.data.code6 != '') {
this.setData({ code6: '', code5: code5 })
} else { this.setData({ code5: '', code4: code4}) }
this.setData({ code6: e.detail.value })
this.checkvolicode()
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
有效果可以看吗？
还要代码吗
<view class="section3 voliline disflexrow flexbetween alatemcenter">
<input class="fangin" type="number" maxlength="1" bindinput="input1" auto-focus="{{code0}}" focus="{{code0}}" value="{{code1}}" index="1" bindtap="changecode"/>
<input class="fangin" type="number" maxlength="1" bindinput="input2" auto-focus="{{code1}}" focus="{{code1}}" value="{{code2}}" index="2" bindtap="changecode"/>
<input class="fangin" type="number" maxlength="1" bindinput="input3" auto-focus="{{code2}}" focus="{{code2}}" value="{{code3}}" index="3" bindtap="changecode"/>
<input class="fangin" type="number" maxlength="1" bindinput="input4" auto-focus="{{code3}}" focus="{{code3}}" value="{{code4}}" index="4" bindtap="changecode"/>
<input class="fangin" type="number" maxlength="1" bindinput="input5" auto-focus="{{code4}}" focus="{{code4}}" value="{{code5}}" index="5" bindtap="changecode"/>
<input class="fangin" type="number" maxlength="1" bindinput="input6" auto-focus="{{code5}}" focus="{{code5}}" value="{{code6}}" index="6" bindtap="changecode"/>
</view>
input1:function(e){
if (e.detail.keyCode == 8 || e.detail.value==''){
this.setData({ code1: '',code2: '',code3: '',code4: '',code5: '',code6: '', code0: true })
}else{
this.setData({code1: e.detail.value})
}
},
input2: function (e) {
if (e.detail.keyCode == 8 || e.detail.value == '') {
var code2 = this.data.code2;
var code1 = this.data.code1;
if (this.data.code2 != '') {
this.setData({ code2: '',code3: '',code4: '',code5: '',code6: '', code1: code1 })
} else { this.setData({ code1: '', code0:true }) }
} else {
this.setData({ code2: e.detail.value })
}
},
input3: function (e) {
if (e.detail.keyCode == 8 || e.detail.value == '') {
var code2 = this.data.code2;
var code1 = this.data.code1;
if (this.data.code3 != '') {
this.setData({ code3: '',code4: '',code5: '',code6: '', code2: code2 })
} else { this.setData({ code2: '', code1: code1 }) }
} else {
this.setData({ code3: e.detail.value })
}
},
input4: function (e) {
if (e.detail.keyCode == 8 || e.detail.value == '') {
var code2 = this.data.code2;
var code3 = this.data.code3;
if (this.data.code4 != '') {
this.setData({ code4: '',code5: '',code6: '', code3: code3 })
} else { this.setData({ code3: '', code2: code2 }) }
} else {
this.setData({ code4: e.detail.value })
}
},
input5: function (e) {
if (e.detail.keyCode == 8 || e.detail.value == '') {
var code4 = this.data.code4;
var code3 = this.data.code3;
if (this.data.code5 != '') {
this.setData({ code5: '',code6: '', code4: code4 })
} else { this.setData({ code4: '', code3: code3 }) }
} else {
this.setData({ code5: e.detail.value })
}
},
input6: function (e) {
if (e.detail.keyCode == 8 || e.detail.value == '') {
var code4 = this.data.code4;
var code5 = this.data.code5;
if (this.data.code6 != '') {
this.setData({ code6: '', code5: code5 })
} else { this.setData({ code5: '', code4: code4}) }
} else {
this.setData({ code6: e.detail.value })
this.checkvolicode()
}
},