事先声明!本人前端小白一枚,偶然遇到在ios端input框被遮挡的问题,十分苦恼,也尝试了很多解决办法但都不是很有效,最后在一位大牛的帮助下得到解决,想记录一下分享一下,如果你也遇到可以尝试一样看看!
先复现问题!
我这里是产生问题的环境是uni小程序 并且使用了u-popup的弹出框组件 里面的input产生的bug
说一下解决的历程
首先想到的是增加弹出框的高度 让input框里软键盘远一点(仅发现在ios端有问题 安卓没有)我做的处理是先判断机型是安卓还是苹果,然后增加input框父元素的高度,从而远离软键盘。
代码如下
const info = wx.getSystemInfoSync()if (info.system.indexOf('Android') > -1) {console.log('安卓')} else {this.Bottom = 235console.log('ios')}
然后给父元素动态添加高度就可以了
结果是能解决 但处理的方式不好,会留出很大的空隙,影响美观,后面又产生在input获取焦点和失去焦点上想办法 做处理但这样的感觉会跳一下,觉得不是很好,让弹出框滑动出软键盘的高度,参考的很多办法,实现起来无疑同ui说,帮我重新设计一下,bug改好等于重做。。。
直接说解决办法吧,在大牛的帮助下 两行代码解决了,同时也体现了自己对一下细节了解的还是不够深入,分析给大家 少走弯路吧!
cursor-spacing="85rpx" :always-embed="true"
只需要给input框添加这两个属性就解决了
后面查询了官方文档是
cursor-spacing 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 (其实这个我也试过,但还是会偶发的复现bug就放弃了)
always-embed 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
希望对你有用!若有更好的解决办法,还望告知!
来源地址:https://blog.csdn.net/qq_43549412/article/details/130429301