当前位置：首页 > news >正文

微信小程序一个页面同时存在input和textarea，bindkeyboardheightchange相互影响

news 2025/9/6 6:09:48

……
<input/>
……
<textarea……bindlinechange="textareaLineChange"bindinput="onInput"bindblur="onBlur"bindfocus="onFocus"bindconfirm="sendMsg"bindkeyboardheightchange="handleKeyboardheightchange"……>
</textarea>

示例代码如上，当一个页面同时存在input和textarea时，（安卓机型）聚焦唤起键盘都会进入textarea的handleKeyboardheightchange事件。

题主希望的效果是，input的任何操作不应该影响到textarea。

经过排查，与查阅相关资料验证，得出结论与下同

textarea与input的相爱相杀

绑定bindkeyboardheightchange事件

问题：

只为textarea绑定bindkeyboardheightchange事件，input也会触发textarea的bindkeyboardheightchange事件，并且触发所携带的参数都是textarea上面的参数

机型：安卓必现

解决总体思路：区分键盘高度触发事件的来源，是input还是textarea

解决方案1：（验证失败）在textarea的focus事件里，增加聚焦标志，当bindkeyboardheightchange触发，判断textarea是否处于聚焦状态，如果不是，则证明该事件来源不是这个textarea

    // 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

……
<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的效果

……
<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)}}

结果成功

成功原因：事件触发顺序是点击事件--键盘变化事件--聚焦事件

点击事件先于键盘变化事件触发，可以在这个节点增加判断标志