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

html 复制代码

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

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

结果成功

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

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