微信小程序文本区域概述及输入问题（微信小程序Rich-Text）

本文提供了微信小程序的相关知识。 主要介绍文本区和小程序的输入问题。 这两种成分单独使用是没有问题的。 然而，当两人出现在一起时，问题却接二连三地出现。 我们一起来看看吧。 我希望这对你有帮助。

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

微信小程序有两个原生组件：textarea和input。 这两个要素是分开的，单独使用一个没有问题，但是两者结合起来，问题就接二连三地出现，都非常玄学。 我在开发过程中遇到了这些形而上的问题。 一个简单的表单输入页面只是实现了一个手动实现页面。 推送功能花了几天时间才正常工作。

渲染：

思考

用特殊的方式解决了这些形而上的问题后，我思考了很多

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

我明明是用正常的方式写的，但是为什么它在iOS智能手机上可以运行，而在Android上却不行？ 它在智能手机上不起作用吗？

为什么在某些情况下可以，而在其他情况下则不行？

将来要避免？绕过这些问题，我决定探索textarea和input之间的爱与死。

测试机器

本研究使用了以下机器。

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

iOS机：iPhone13

p>

这里，一个玄学问题！

1. 绑定bindkeyboardheightchange事件

问题：仅为textarea绑定bindkeyboardheightchange事件。 输入还会触发文本区域的bindkeyboardheightchange 事件。 触发器携带的参数都是文本区的参数。

型号：应显示 Android。

示例：

解决方案：未找到解决方案

2. 当将hold-keyboaed设置为true时

问题：textarea的hold-keyboaed属性如果设置为true，如果输入具有非文本类型，连续的开关将阻止键盘上的完成，并且文本区域将不再获得焦点。

型号：Android必须显示

gif示例：

解决方案：1. show- 当我使用confirm[时k3]bar 当我抬起键盘时，文本区域上方的完成按钮不可见。 2. 输入类型设置为文本。 3. 不要将hold-keyboaed设置为true

3. Textarea穿透问题

问题：如果有固定元素，无论z-有多少个]index值，如果设置了，textarea组件会穿过固定元素

p>

型号：Android 有时

奇怪点：有时不显示，而是二维码 当我重新编译代码并扫描和预览它时，文本区域渗透问题发生并继续发生。 但是，如果您删除了手机上的小程序，重新编译并扫描二维码时，该小程序可能不再出现。 此问题示例

gif：

解决方案：如果遇到需要覆盖textarea的固定元素，将textarea设为非可以显示或旋转文本区域。 显示固定元素时绑定到视图元素。

4.绑定bind focus事件。

问题：如果我只是将bind focus事件绑定到一个textarea上，那么当我进入页面时第一次点击textarea然后立即点击input时就会触发该事件。 文本区域焦点。 us事件

型号：Android 有时

GIF示例：

解决方案：通过焦点动态聚焦Textarea即可控制。 避免将输入类型设置为数字类型。

5. 过渡动画

问题：按键如果在盘抬起过程中手动通过bottom或translateY抬起页面并设置了过渡动画属性，textarea占位符会闪烁。

型号：应显示Android

gif示例：

解决方案：确定机器型号 因此，iOS添加了转场属性，但Android机器不添加transition属性

6. 点击完成

问题：Textarea绑定了bindkeyboardheightchange事件并使用自己的完成，但是点击完成时没有触发。 bindkeyboardheightchange事件

型号：Android偶尔

示例：

解决方案：未找到解决方案

7 设置auto时出现问题-height

：如果textarea的auto-height属性为true，那么使用selectComponet获取高度时会出现问题。 它可能是没有内容的行的初始高度，也可能是文本区域的默认高度。

机型：iOS、Android

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

8.键盘高度检索不一致

问题：bindkeyboardchange事件被多次触发。 得到的键盘高度不一致，有时与成品高度相符，有时与成品高度不相符。

型号：Android 有时

解决方案：未找到转到解决方案

9. 获取数据精度时出现问题

问题：通过 selectComponet 、宽度或位置，默认保留所有小数点，大约为 16 位，可能会导致动画混乱。

型号：可能是 iOS 或 Android。

解决方案：js语言本身存在精度问题。 因此，通过selectComponent取出数据后，最好只保留小数点后两位进行处理。

p>

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

下载微信应用

微信是一款支持通过手机网络发送语音消息、视频、照片和文字的通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

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

• 微信小程序开发的宿主环境详解（微信小程序开发环境搭建流程）
• 微信小程序架构基本原理详解（微信小程序B/S或C/S架构）
• 来说说微信小程序中的事件绑定（微信小程序中的一个按钮可以绑定多个事件吗？）
• 增强微信小程序基本概述（微信小程序基础知识）
• 简介：实现小程序的授权登录功能

本文由主机参考刊发，转载请注明：微信小程序文本区域概述及输入问题（微信小程序Rich-Text） https://zhujicankao.com/140640.html