微信小程序中的文本区和输入汇总（微信小程序文本）

这篇文章给大家带来了一些关于微信小程序的知识，主要介绍了小程序中关于文本区和输入的问题汇总。当这两种成分单独使用时没有问题，但当它们一起出现时，问题就会随之而来。下面我们一起来看看，希望对大家有所帮助。

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

在微信小程序中，有两个原生组件textarea和input。这两个成分单独使用时没有问题，但它们一起出现时，问题接踵而至，而且都是非常形而上学的问题。我在发展中遇到了这些形而上学的问题。一个简单的表单在页面中填写，只是为了实现手动推送页面的功能，花了好几天才完成！

渲染:

想

在我以一种特殊的方式解决了这些形而上学的问题后，我想了很多

为什么textarea和input一起使用会出现这些形而上学的问题？

我显然是用正常的方式写的。为什么ios手机可以工作，而Android手机不行？

为什么我有时能做到，有时不能？

...诸如此类。

为了以后不在这些问题上走弯路，我决定好好探索一下，textarea和input之间的爱情互相残杀。

试验机

本次探索中使用的机器有

安卓机:荣耀20、小米10s；

Ios机器:iPhone13

形而上学的问题来了！

1.绑定bindkeyboardheightchange事件:bindkeyboardheightchange事件只为textarea绑定，input也会为textarea触发bindkeyboardheightchange事件，触发器携带的参数都是textarea上面的参数。

型号:Android必须存在

示例:

解决方案:未找到解决方案。

2.将Hold -Keyboard设置为true时出现的问题:当textarea和input的Hold -Keyboard属性设置为true，并且input中有一种类型不是文本时，连续切换将阻止键盘上方的补全，并且不再关注textarea。

型号:Android必须存在

示例gif:

解决方法:1。当抬起textarea键盘时，show-confirm-bar不会在顶部显示“完成”按钮；2.输入类型设置为文本；3.按住-键盘未设定为true。

3.textarea穿透问题:当存在固定元素时，无论设置多少z-索引值，textarea组件都会穿透固定元素。

型号:Android偶尔

玄学点:有时不会出现，但当我重新编译并扫描代码进行预览时，会出现textarea穿透的问题，并且之后会一直出现，但当我删除手机上的小程序时，有可能在我重新编译并扫描代码时不会出现该问题。

示例gif:

解决方案:当您需要一个固定元素来覆盖文本区域时，您可以隐藏文本区域或在固定元素出现时将其转换为视图元素。

4.绑定bindfocus事件问题:当仅将bindfocus事件绑定到textarea时，在进入页面后单击textarea，然后单击input将触发textarea的focus事件。

型号:Android偶尔

示例gif:

解决方案:可以使用focus动态控制textarea的焦点，尽量不要将输入的类型设置为数字类型。

5.过渡动画问题:如果在键盘提起过程中通过bottom或translateY手动提起page页面，并且设置了过渡动画属性，则textarea的占位符将闪烁。

型号:Android必须存在

示例gif:

解决方案:判断机型，ios加了过渡属性，安卓不加过渡属性。

6.单击“完成”时的问题:当textarea与bindkeyboardheightchange事件绑定并使用其自身的完成时，单击“完成”时不会触发bindkeyboardheightchange事件。

型号:Android偶尔

示例gif:

解决方案:未找到解决方案。

7.设置auto-height时出现的问题:当textarea的auto-height属性为true时，使用selectComponet获取高度时会出现问题，有时是没有内容的行的初始高度，有时是textarea的默认高度。

型号:ios和Android

解决方案:动态控制auto -高度的值，或使用计时器延迟高度的获取。

8.keyboardHeight获取不一致:多次触发bindkeyboardchange事件，从事件中获取的键盘高度不一致，有时有完成高度，有时没有完成高度。

型号:Android偶尔

解决方案:未找到解决方案。

9.数据获取的准确性:通过selectComponet获取元素的高度、宽度或位置时，默认会保留所有小数，约16位数字，这可能会导致动画混乱。

型号:ios和Android偶尔

解决方案:js语言本身就有精度问题，所以通过selectComponent获取数据后最好只保留两位小数进行处理。

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

以上是微信小程序中textarea和input的问题汇总的详细内容。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 微信小程序中如何实现子对父的参数传递（页面沟通）（小程序父对子的价值传递）
• 详细讲解如何在微信小程序中安装和引用ECharts。(如何安装小程序示例)
• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）

本文由主机参考刊发，转载请注明：微信小程序中的文本区和输入汇总（微信小程序文本） https://zhujicankao.com/103272.html