当前位置: 首页 > backend >正文

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

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

结果成功

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

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

http://www.xdnf.cn/news/20088.html

相关文章:

  • 基于STM32单片机的水位浑浊度检测设计
  • Vue CLI 环境变量和文件加载规则.env文件
  • 《Istio故障溯源:从流量劫持异常到服务网格的底层博弈》
  • AI智能优化SEO关键词策略实战
  • 反序列化的学习笔记
  • Docling将pdf转markdown以及与AI生态集成
  • 23种设计模式——原型模式 (Prototype Pattern)详解
  • Java第十四幕集合啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
  • LabView学习
  • 迁移学习的案例
  • 嵌入式系统学习Day30(udp)
  • AI架构师的新工具箱:DeepSeek、Copilot、AutoML
  • 鸿蒙项目篇-20-创建模拟器
  • 第25节:VR基础与WebXR API入门
  • 命令行中如如何打开目录?vscode中如何打开目录
  • 医疗行业API管理优化:使用QuickAPI提高数据安全与接口性能
  • C++算法专题学习——分治
  • 发现一个Vue开发者的“氮气加速”神器:xiangjsoncraft - 用JSON驱动页面构建
  • AMD KFD驱动技术分析16:SVM Aperture
  • 最新PDF版本!Acrobat Pro DC 2025,解压即用版
  • 力扣:2322. 从树中删除边的最小分数
  • TensorFlow 面试题及详细答案 120道(91-100)-- 实际应用与案例
  • 从零打造商业级LLMOps平台:开源项目LMForge详解,助力多模型AI Agent开发!
  • 【代码随想录day 23】 力扣 93.复原IP地址
  • C++语言程序设计——06 字符串
  • 记录下chatgpt的openai 开发过程
  • Gemini-2.5-Flash-Image-Preview 与 GPT-4o 图像生成能力技术差异解析​
  • U盘文件系统转换指南:方法、原因与注意事项
  • 微信小程序截屏与录屏功能详解
  • 数字人系统源码搭建与定制化开发:从技术架构到落地实践