微信小程序一个页面同时存在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)
      }
    }

结果成功

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

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

相关推荐
Q_Q5110082851 小时前
python+uniapp基于微信小程序美食点餐系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_916008891 小时前
iOS 26 软件性能测试全流程,启动渲染资源压力对比与优化策略
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张2 小时前
iOS 26 兼容测试实战,机型兼容、SwiftUI 兼容性改动
android·ios·小程序·uni-app·swiftui·cocoa·iphone
OEC小胖胖2 小时前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
mon_star°2 小时前
基于微信小程序高仿背单词消除游戏
游戏·微信小程序·小程序
jingling5552 小时前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
ZeroNews内网穿透2 小时前
新版发布!“零讯”微信小程序版本更新
运维·服务器·网络·python·安全·微信小程序·小程序
molong9312 小时前
Android 应用配置跳转微信小程序
android·微信小程序·小程序
尘似鹤2 小时前
微信小程序学习(二)
学习·微信小程序·小程序
杏花春雨江南2 小时前
微信小程序里 uni.navigateTo 用的多了, 容易报错,
微信小程序·小程序·notepad++