FWQ
微信小程序中textarea与input的问题总结
本篇文章给大家带来了关于的相关知识,其中主要介绍了关于小程序中textarea与input的问题总结,这两个组件单独只用一个时,是没有什么问题的,但是当他们两个一起出现时,问题就接踵而来,下面一起来看一下,希望对大家有帮助。 【相关学习推荐:】 微信小程序中,有两个原生组件textarea和input,这两个组件单独只用一个时,是没有什么问题的,但是当他们两个一起出现时,问题就接踵而来,并且都是些很玄学的问题,我在开发时就遇到了这些玄学的问题,一个简单的表单填写页面,只是为了实现一个手动实现页面上推的功能,硬是搞了好几天才弄好! 效果图: 思考 在我把这些玄学问题通过特殊方式解决后,我思考了很多很多 为什么textarea和input组合在一起使用时为什么会有这些玄学问题? 我明明是正常的写法,为什么ios手机可以,到安卓机就不行了? 为什么有些时候可以有些时候又不可以? …等等等等 为了以后不在这些问题上走弯路,所以我决定好好的去探索一番,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 机型:安卓必现 示例gif: 解决办法:1. 通过show-confirm-bar不显示textarea键盘抬起时上方的完成按钮,2. input的type都设置为text,3.…