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

结果成功

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

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

相关推荐
万岳科技程序员小金6 小时前
餐饮、跑腿、零售多场景下的同城外卖系统源码扩展方案
人工智能·小程序·软件开发·app开发·同城外卖系统源码·外卖小程序·外卖app开发
毕设源码-邱学长14 小时前
【开题答辩全过程】以 小众商户小程序为例,包含答辩的问题和答案
小程序
sheji341616 小时前
【开题答辩全过程】以 基于微信小程序的“XIN”学生组织管理系统为例,包含答辩的问题和答案
微信小程序·小程序
一匹电信狗16 小时前
【Linux我做主】细说进程等待
linux·运维·服务器·c++·ubuntu·小程序·开源
2501_9159090617 小时前
uni-app iOS 上架常见问题与解决方案,实战经验全解析
android·ios·小程序·https·uni-app·iphone·webview
编程迪1 天前
货运系统源码 货运物流小程序 货运平台搭建 货运软件开发
小程序·货运系统·货运源码·货运物流软件·货运平台搭建
低代码布道师1 天前
少儿舞蹈小程序(6)打造您的“活”名片:动态展示机构实力
低代码·小程序
星河顾盼1 天前
【微信小程序预览文件】(PDF、DOC、DOCX、XLS、XLSX、PPT、PPTX)
微信小程序·pdf·powerpoint
小浣熊喜欢揍臭臭2 天前
uniapp+vue3 微信小程序全屏广告组件功能
微信小程序·uni-app