textarea与input的相爱相杀

测试机器

本次探索所用到的机器为

  • 安卓机器:荣耀20,小米10s;

  • ios机器:iPhone13

1、绑定bindkeyboardheightchange事件

问题:

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

机型:安卓必现

示例:

示例

解决办法:未找到解决办法

2、设置hold-keyboaed为true时

问题:

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

机型:安卓必现

示例:

示例

解决办法:

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

3、textarea穿透问题

问题:

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

机型:安卓偶现

玄学点:

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

示例:

示例

解决办法:

当遇到需要fixed元素盖住textarea时,可以当fixed元素出现时,将textarea隐藏或者变成view元素

4、绑定bindfocus事件

问题:

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

机型:安卓偶现

示例:

示例

解决办法:

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

5、transition动画

问题:

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

机型:安卓必现

示例:

示例

解决办法:

判断机型,ios添加transition属性,安卓机器不添加transition属性

6、点击完成时

问题:

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

机型:安卓偶现

示例:

示例

解决办法:未找到解决办法

7、设置auto-height时

问题:

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

机型:ios和安卓

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

8、键盘高度获取不一致

问题:

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

机型:安卓偶现

解决办法:未找到解决办法

9、获取数据精度问题

问题:

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

机型:ios和安卓偶现

解决办法:

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

本文转载于:php中文网,掘金,如有侵犯,请联系删除

php中文网地址

posted on 2022-11-18 15:29  depressiom  阅读(2134)  评论(0编辑  收藏  举报