微信小程序fixed定位元素中的textarea聚焦时被键盘遮挡

场景描述

用户点击某选项,弹出一个表单弹窗,弹窗中有使用textarea组件,当用户点击输出框输入时,键盘遮挡到textarea组件原本的文字,textarea组件悬浮到键盘上方并遮挡其他内容

BUG复现

这是一个代码片段

预期输入时效果

在这里插入图片描述

BUG表现

在这里插入图片描述

解决方案

1 修改弹窗定位方式

将弹窗的fixed定位改为absolute定位,可解决此问题

局限性:absolute定位方式必须依赖上级的relative定位元素,可能导致布局问题;

2 修改文档流布局

当page中文档流已滚动到页底,或page文档流高度不超过page时,不会出现此问题;

所以可以通过使用scroll-view将文档流内容包裹起来,让page的内容不超出page,就不会出现这个问题

局限性:使用scroll-view组件,就无法触发page的onReachBottom事件,要改为监听scroll-view的滚动事件实现上拉加载

或者在弹窗弹出时,手动将page滚动到底部,也可解决

局限性:滚动页面体验不佳

3 属性fixed=true

查阅文档发现,textarea组件有一个属性fixedfixed
附上文档链接

原来只要设置这个属性就可以了;问题解决;perfect

总结

textarea是原生组件,有颇多局限性,使用原生组件时有很多限制,而且有很多诸如此类的bug,要多多注意;使用组件时多看文档,毕竟小程序的组件与html的标签差距颇大

微信小程序,如果想要实现textarea自动聚焦并弹出键盘的功能,可能会遇到一些问题。其一个问题是,点击textarea组件需要点击两次键盘才会弹起来。这个问题的原因是微信官方监听键盘的方法存在bug。第一次点击,获取到的键盘高度为0,导致键盘无法正常弹出。解决这个问题的方法是在键盘高度变换的回调函数进行判断,如果键盘高度为0,则将焦点设置为false,否则进行相应的操作。\[1\] 另外,还有一些其他问题可能会出现。例如,手机唤起键盘后,可能无法看到文本框;或者弹窗fixed后,textarea内容会随页面滚动。针对这些问题,可以采取一些解决办法。例如,给textarea标签设置cursor-spacing属性,表示textarea光标距离键盘的距离,并添加fixed属性。另外,可以在点击文本框后将弹窗的position设置为absolute,关闭文本框后将弹窗的position设置为fixed。\[2\] 此外,还可以在bindfocus方法将一个变量设置为false,表示不是第一次点击。这样可以解决点击两次键盘才弹出的问题。\[3\] 综上所述,要实现微信小程序textarea自动聚焦弹出键盘的功能,可以根据具体情况采取相应的解决办法,包括修复微信官方的bug、设置属性和调整弹窗的position等。 #### 引用[.reference_title] - *1* *3* [小程序textarea要点两次键盘才会弹出](https://blog.csdn.net/lovelyYou123/article/details/127613343)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [小程序弹窗文本框textarea,唤起键盘后的BUG解决办法](https://blog.csdn.net/wwz123124/article/details/95887536)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值