html
......
<input/>
......
<textarea
......
bindlinechange="textareaLineChange"
bindinput="onInput"
bindblur="onBlur"
bindfocus="onFocus"
bindconfirm="sendMsg"
bindkeyboardheightchange="handleKeyboardheightchange"
......>
</textarea>
示例代码如上,当一个页面同时存在input和textarea时,(安卓机型)聚焦唤起键盘都会进入textarea的handleKeyboardheightchange事件。
题主希望的效果是,input的任何操作不应该影响到textarea。
经过排查,与查阅相关资料验证,得出结论与下同
绑定bindkeyboardheightchange事件
问题:
只为textarea绑定bindkeyboardheightchange事件,input也会触发textarea的bindkeyboardheightchange事件,并且触发所携带的参数都是textarea上面的参数
机型:安卓必现
解决总体思路:区分键盘高度触发事件的来源,是input还是textarea
解决方案1:(验证失败)在textarea的focus事件里,增加聚焦标志,当bindkeyboardheightchange触发,判断textarea是否处于聚焦状态,如果不是,则证明该事件来源不是这个textarea
javascript
// textarea聚焦
const onFocus = e => {
......
isFocus= true
......
}
// textarea失焦
const onBlur = e => {
......
isFocus= false
......
}
// 键盘高度变化监听回调
const handleKeyboardheightchange = e => {
if (isFocus) {
// textarea正在聚焦,可以处理textarea的键盘高度变化
ctx.triggerEvent('onKeyboardChange', e.detail)
}
}
结果失败
失败原因:键盘高度变化事件先于聚焦事件触发(实测,有7~10ms的时间间隔)
解决方案2:(验证失败)在textarea上面绑定data-xxx,用e.target.dataset.id来判断事件来源是不是textarea
javascript
......
<input/>
......
<textarea
......
data-id="footer-textarea"
bindlinechange="textareaLineChange"
bindinput="onInput"
bindblur="onBlur"
bindfocus="onFocus"
bindconfirm="sendMsg"
bindkeyboardheightchange="handleKeyboardheightchange"
......>
</textarea>
// 键盘高度变化监听回调
const handleKeyboardheightchange = e => {
if (e.target.dataset.id === 'footer-textarea') {
// 事件来源是textarea,可以处理textarea的键盘高度变化
ctx.triggerEvent('onKeyboardChange', e.detail)
}
}
结果失败
失败原因:input会触发textarea绑定的键盘高度变化事件,且事件来源是textarea。根本无法通过data-id来判断事件来源,因为来源都是textarea。
解决方案3:(成功)给textarea绑定bindtap事件,用bindtap事件来实现方案1的效果
html
......
<input/>
......
<textarea
......
bindlinechange="textareaLineChange"
bindtap="textareaTap"
bindinput="onInput"
bindblur="onBlur"
bindfocus="onFocus"
bindconfirm="sendMsg"
bindkeyboardheightchange="handleKeyboardheightchange"
......>
</textarea>
let canDealKeyboard = false // 是否需要处理键盘高度变化事件
const textareaTap = e => {
canDealKeyboard = true
}
// textarea聚焦
const onFocus = e => {
......
canDealKeyboard = true
......
}
// textarea失焦
const onBlur = e => {
......
canDealKeyboard = false
......
}
// 键盘高度变化监听回调
const handleKeyboardheightchange = e => {
if (canDealKeyboard) {
// textarea正在聚焦,可以处理textarea的键盘高度变化
ctx.triggerEvent('onKeyboardChange', e.detail)
}
}
结果成功
成功原因:事件触发顺序是 点击事件--键盘变化事件--聚焦事件
点击事件先于键盘变化事件触发,可以在这个节点增加判断标志