- 需求:
一個input輸入完回車洪燥,切換到下一個input。 - 思路:
JS里聲明2個變量: focus是否獲得焦點(diǎn)撵彻,focusIndex需要焦點(diǎn)的序號墙贱。wxml中給input設(shè)置id,設(shè)置focus屬性由這兩個變量來控制却紧。在JS的輸入完成監(jiān)聽事件里獲取下一個input的id序號并修改變量桐臊。
js:
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
...
// 是否獲取焦點(diǎn)
focus: false,
// 需要獲取焦點(diǎn)的序號
focusIndex: 0
},
// 輸入完成事件
confirmListener (event) {
let currentIndex = event.currentTarget.dataset.categoryIndex
if (currentIndex < input的數(shù)量 - 1) {
this.setData({
focus: true,
focusIndex: currentIndex + 1
})
}else {
this.setData({
focus: false
})
}
},
// 輸入時事件
inputListener(event) {
...
let currentIndex = event.currentTarget.dataset.categoryIndex
if (this.focusIndex != currentIndex) {
this.setData({
focusIndex: currentIndex
})
}
},
})
wxml:
<input id="input{{index}}" data-category-index="{{index}}"
bindinput="inputListener" bindconfirm="confirmListener"
focus="{{focus && focusIndex == index}}"