使用focus可以做到输入跳转到下一个,删除时我使用的是bindinput带过来的内容如果为空则跳转到上一个input,可是,如果input为空,就不会触发bindinput就做不到删除上一个input的内容,本来想监听键盘的删除事件,但是经过查询,给出的方法是bindinput中带有keyCode,那么问题有回来了,input为空并不会触发,bindinput,自然也就拿不到keyCode依然还是无法监听到键盘事件.....这是我是想要实现的效果图:
wxml代码:
<view class="code">
<input class="input_a" bindinput="inputListener" data-index="{{index}}" focus="{{focus && (focusIndex == index)}}" model:value="{{code[index]}}" placeholder="_" wx:for="{{code}}" wx:key="index" maxlength="1"/>
</view>
js代码:
data: {
code:["","","","","","","","","","","","","","","","","","","","","","","","",],
focus: true,
focusIndex: 0,
},
// 输入时事件
inputListener(v) {
console.log("键盘",v.detail.keyCode)
console.log("下标",v.currentTarget.dataset.index)
console.log("内容",v.detail.value)
let e = v.currentTarget.dataset.index
let n = v.detail.value
let index = "code[" + e + "]"
this.setData({
[index]:n
})
if (this.data.focusIndex != e)
this.setData({
focusIndex:e
})
if (e < 24) {
if(n != ''){
if(this.data.focusIndex == 23){
this.setData({
focus:true,
})
}else{
this.setData({
focus:true,
focusIndex:e + 1
})
}
}else{
this.setData({
focus:true,
focusIndex:e - 1
})
}
}
},
你可以把他写成一个view,ontap事件就是让一个隐藏的input获取焦点。然后input的bindinput是赋值给value(value是一个变量名)。而你的view中的内容就是用来展示value就好了。看上去就像是多个input输入了
首先,你用这么多input肯定是不行的,在手机上的体验非常不好!每次输完一个数字,键盘都会缩起再出现,抖动很厉害。我改造了下你的,改成只用一个input了,https://developers.weixin.qq.com/s/FEPOLPm87RD7
不能在一个input里面实现么,每隔4位插空格