VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动

微信小程序中的文本区和输入汇总(微信小程序文本)

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

微信小程序中的文本区和输入汇总(微信小程序文本)

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

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

渲染:

+1.gif

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

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

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

为什么我有时能做到,有时不能?

...诸如此类。

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

试验机

本次探索中使用的机器有

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

Ios机器:iPhone13

形而上学的问题来了!

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

型号:Android必须存在

示例:

+2.gif

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

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

型号:Android必须存在

示例gif:

+4.gif

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

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

型号:Android偶尔

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

示例gif:

+5.gif

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

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

型号:Android偶尔

示例gif:

+6.gif

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

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

型号:Android必须存在

示例gif:

+7.gif

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

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

型号:Android偶尔

示例gif:

+8.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的问题汇总的详细内容。更多资讯请关注主机参考其他相关文章!

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 微信小程序中的文本区和输入汇总(微信小程序文本)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!