微信小程序中textarea与input的问题总结

WBOY

发布时间：2022-10-09 10:48:40

2586人浏览过

来源于掘金

转载

本篇文章给大家带来了关于微信小程序的相关知识，其中主要介绍了关于小程序中textarea与input的问题总结，这两个组件单独只用一个时，是没有什么问题的，但是当他们两个一起出现时，问题就接踵而来，下面一起来看一下，希望对大家有帮助。

微信小程序中textarea与input的问题总结

【相关学习推荐：小程序学习教程】

微信小程序中，有两个原生组件textarea和input，这两个组件单独只用一个时，是没有什么问题的，但是当他们两个一起出现时，问题就接踵而来，并且都是些很玄学的问题，我在开发时就遇到了这些玄学的问题，一个简单的表单填写页面，只是为了实现一个手动实现页面上推的功能，硬是搞了好几天才弄好！

效果图：

+1.gif

思考

在我把这些玄学问题通过特殊方式解决后，我思考了很多很多

为什么textarea和input组合在一起使用时为什么会有这些玄学问题？
我明明是正常的写法，为什么ios手机可以，到安卓机就不行了？
为什么有些时候可以有些时候又不可以？

...等等等等

为了以后不在这些问题上走弯路，所以我决定好好的去探索一番，textarea与input的相爱相杀

测试机器

本次探索所用到的机器为

安卓机器：荣耀20，小米10s；

ios机器：iPhone13

玄学问题来了！

1、绑定bindkeyboardheightchange事件

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

机型：安卓必现

示例:

+2.gif

解决办法：未找到解决办法

2、设置hold-keyboaed为true时

问题：当把textarea和input的hold-keyboaed属性设置为true时，并且input中有一个type不为text时,连续切换会把键盘上方的完成卡住，并且不会再聚焦textarea

机型：安卓必现

示例gif:

+4.gif

解决办法：1. 通过show-confirm-bar不显示textarea键盘抬起时上方的完成按钮，2. input的type都设置为text，3. 不设置hold-keyboaed为true

3、textarea穿透问题

问题：当有fixed元素时，无论设置多少z-index值，textarea组件都会穿透该fixed元素

机型：安卓偶现

玄学点：有时是不会出现的，但当我重新编译、扫码预览时，就会出现textarea穿透问题，并且之后都会一直出现，但当我把小程序在手机上删除后，重新编译扫码就有几率不会出现该问题

微厦在线学习培训系统2.0

《微厦在线学习考试系统》将“ 视频学习、试题练习、在线考试 ”紧密相联，打造成为集 “学、练、考” 于一体的在线学习系统。“点播/直播”、“刷题/测试”、“组卷/考试”，根据学习内容的不同权重汇总综合成绩，生成学习证明。支持在线支付（微信支付、支付宝支付）；利用充值卡、学习卡配合线下营销；Web端、APP、小程序，多终端方便学习。适用：大学、中职中专、培训机构、企事业单位行业：企业内训、成人教育、

下载

示例gif:

+5.gif

解决办法：当遇到需要fixed元素盖住textarea时，可以当fixed元素出现时，将textarea隐藏或者变成view元素

4、绑定bindfocus事件

问题：当只给textarea绑定bindfocus事件，进入页面先点击textarea后，再马上点击input会触发textarea的focus事件

机型：安卓偶现

示例gif:

+6.gif

解决办法：可以通过focus去动态的控制textarea的聚焦情况，并且尽量不设置input的type为number类型

5、transition动画

问题：在键盘抬起过程中如果通过bottom或translateY手动抬起page页面时，并设置了transition动画属性，会导致textarea的placeholder闪动

机型：安卓必现

示例gif:

+7.gif

解决办法：判断机型，ios添加transition属性，安卓机器不添加transition属性

6、点击完成时

问题：textarea绑定bindkeyboardheightchange事件，并且使用了自带的完成时，点击完成时不会触发bindkeyboardheightchange事件

机型：安卓偶现

示例gif:

+8.gif

解决办法：未找到解决办法

7、设置auto-height时

问题：当textarea的auto-height属性为true时，会导致使用selectComponet获取高度时出现问题，有时是没有内容的一排初始高度，有时是textarea的默认高度

机型：ios和安卓

解决办法：动态控制auto-height的值，或使用定时器延迟获取高度

8、键盘高度获取不一致

问题：多次触发bindkeyboardchange事件，从事件中获取的keyboardHeight高度不一致，有时是带了完成的高度，有时是没有带完成的高度

机型：安卓偶现

解决办法：未找到解决办法

9、获取数据精度问题

问题：通过selectComponet获取元素的高宽或位置时，会默认保留全部小数，大概为16位，有几率导致动画出现混乱

机型：ios和安卓偶现

解决办法：js语言本身就有精度问题，所以在通过selectComponent获取到数据后，最好只保留两位小数来进行处

【相关学习推荐：小程序学习教程】

2026年值得布局的小程序类型有哪些?

无货源也能做,文创电商小程序,靠IP赋能实现轻资产创业

商家联盟小程序:跨店引流+积分通用

小程序分享误区,以为分享就有裂变?

开源社区小程序本地运行教程,教你部署到本地!

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！

下载

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

506

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

240

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

248

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5214

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

470

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

205

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

217

2023.09.14