本文为您带来了微信小程序的相关知识，主要介绍了小程序中textarea和input的问题总结。当这两个组件单独使用一个时，没有问题，但当它们一起出现时，问题接踵而至。让我们看看，我希望它能对你有所帮助。

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

在微信小程序中，有两个本地组件textarea和input。当这两个组件单独使用一个时，没有问题。然而，当它们一起出现时，问题接踵而至，它们都是非常形而上学的问题。当我开发它们时，我遇到了这些形而上学的问题。一个简单的表格填写页面，只是为了实现手动推送页面的功能，只需要几天就可以完成！

效果图：

思考

在我以特殊的方式解决了这些玄学问题之后，我想了很多

• 为什么textarea和input一起使用时会出现这些玄学问题？

• 我显然是一个正常的写作方法，为什么ios手机可以，安卓机器不好？

• 为什么有时候可以，有时候可以？

...等等等等

为了以后不在这些问题上走弯路，我决定好好探索。textarea和input相爱相杀

测试机器

本次探索中使用的机器是

Android机：荣耀20，小米10s；

iPhone13ios机器

玄学问题来了！

1、绑定bindkeyboardheightchange事件

问题:只有当textarea绑定bindkeyboardheightchange事件时，input还会触发textarea的bindkeyboardheightchange事件，触发textarea上方的参数

型号：安卓必现

示例:

解决办法:找不到解决办法:

2、hold-keyboaed设置为true

问题:当textarea和input的hold-keyboaed属性设置为true，input中有一个type不是text时，连续切换会卡住键盘上方的完成，不会再关注textarea

型号：安卓必现

示例gif:

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

3、textarea穿透问题

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

型号：安卓偶现

玄学点:有时候不会出现，但是当我重新编译扫码预览的时候，就会出现textarea穿透的问题，之后就会一直出现，但是当我在手机上删除小程序的时候，就有机会重新编译扫码。

示例gif:

解决方案:当需要fixed元素覆盖textarea时，当fixed元素出现时，textarea可以隐藏或变成view元素

4、绑定bindfocus事件

问题:当只将bindfocus事件绑定到textarea时，先点击textarea进入页面，然后立即点击input触发textareafocus事件

型号：安卓偶现

示例gif:

解决方案:textarea的焦点可以通过focus动态控制，尽量不设置inputtype为number类型

5、transition动画

问题:如果在键盘提升过程中通过bottom或translatey手动提升page页面，并设置transition动画属性，会导致textareaplaceholder闪烁

型号：安卓必现

示例gif:

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

6、点击完成时

问题:当textarea绑定bindkeyboardheightchange事件并使用自己的完成时，点击完成时不会触发bindkeyboardheightchange事件

型号：安卓偶现

示例gif:

解决办法:找不到解决办法:

7、auto-height设置

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

机型：ios和安卓

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

8、键盘高度不一致

问题:多次触发bindkeyboardchange事件，从事件中获得的keyboardheight高度不一致，有时带来完成高度，有时带来未完成高度

型号：安卓偶现

解决办法:找不到解决办法:

9、获取数据的准确性

问题:通过selectcomponet获取元素的高度、宽度或位置时，默认会保留所有小数字，约16位，导致动画混乱的概率

型号:ios和安卓偶现在

解决方案：js语言本身就有精度问题，所以在通过selectcomponent获取数据后，最好只保留两位小数

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

以上是textarea和input在微信小程序中问题总结的详细内容。请关注其他相关文章！

p