事先声明！本人前端小白一枚，偶然遇到在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 = 235
console.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 下生效)
希望对你有用！若有更好的解决办法，还望告知！
推荐阅读
发表评论