【原创】关于多input连续输入问题的解决办法
[图片] 开干！ 1、wxml <view data-place="0" class="input{{curFocus === 0 ? ' on':''}}" bindtap="openKeyBoard">{{passwd[0]}}</view>
<view data-place="1" class="input{{curFocus === 1 ? ' on':''}}" bindtap="openKeyBoard">{{passwd[1]}}</view>
<view data-place="2" class="input{{curFocus === 2 ? ' on':''}}" bindtap="openKeyBoard">{{passwd[2]}}</view>
<view data-place="3" class="input{{curFocus === 3 ? ' on':''}}" bindtap="openKeyBoard">{{passwd[3]}}</view>
<input type="number" model:value="{{inputValue}}" focus="{{focus}}" class="input-original" hold-keyboard="{{true}}" confirm-hold="{{true}}" maxlength="4" bindinput="bindKeyInput" />
2、less 闪烁代替光标 .on { animation: glow 1s linear infinite; }
@keyframes glow {
50% { border-color: #ff6666; }
100% { border-color: #eee; }
}
3、js openKeyBoard(e: any) {
const { place } = e?.currentTarget?.dataset;
this.data.passwd[place] = '';
this.setData({ curFocus: parseInt(place), inputValue: '', focus: true, assign: true, passwd: this.data.passwd });
},
bindKeyInput: function (e) {
const { value } = e?.detail;
let tmp = value.split('');
let curFocus = tmp.length;
let inputValue = '';
if (this.data.assign) {
this.data.passwd[this.data.curFocus] = value.substr(-1);
inputValue = this.data.passwd.join('');
curFocus = this.data.curFocus;
console.log('修改指定位置');
} else {
inputValue = value;
this.data.passwd = value.split('');
}
this.setData({
inputValue: inputValue,
assign: false,
passwd: this.data.passwd,
curFocus: curFocus
})
if (inputValue.length === 4) {
this.setData({
list: [],
loading: true
});
wx.hideKeyboard();
this.loadList(true);
}
},
