IOS下 input 被软键盘方案遮盖问题解决

时间:2023-03-10 03:58:40
IOS下 input 被软键盘方案遮盖问题解决

前言:

 并没有完美解决 !

场景:

 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦。经过测试在安卓上面应该没什么问题,但是iOS上面会出现 input 被软键盘遮盖或者半遮盖、甚至发送按钮不能点击的状况。

 总的来说问题有点小严重。

查阅百度:

 好的,百度一搜,哇!解决方案很多,我就放心的去抽了一根烟,想着分分钟完事。BUT 经过试验 百度 “ios 下input 被软键盘遮盖” 前两页没有一个能解决我的问题的!!!

 不过收获还是有的... 参考文章如下(写了三个比较可以的吧)

 https://blog.****.net/github_37533433/article/details/66471962

 https://juejin.im/post/5b0401b2f265da0b71569ca0

 https://www.cnblogs.com/wx1993/p/6059668.html

解决(Vue):

 因为 iOS 下软键盘弹出并不会改变窗口高度所以也就没试监听 window 的 resize 事件。

 第(n-2)次是在输入框获取焦点的时候:

// 输入框获得焦点
onFocus(){
var that = this;
setTimeout(function(){
that.sendText.scrollIntoView(true);
that.sendText.scrollIntoViewIfNeeded();
},100);
},

 scrollIntoView(true):滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。

 有效果,但是还是会有问题,偶尔还是会出现半遮盖的情况 iPhone6 尤为明显。

 第(n-1)次 是使用的滚动到底部的方法,因为项目的动态列表是有分页的,所以适当的改了一下。

created(){
var u = navigator.userAgent;
this.isAndroid =u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //Android终端
this.isIOS =!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //IOS终端 },
methods:{
// 输入框获得焦点
onFocus(){
var that = this;
this.bfscrolltop = document.body.scrollTop; // 记录当前位置
if(this.isIOS){
setTimeout(function(){
document.body.scrollTop = document.body.scrollTop*1 + 200;
},300)
} },
},

 在点击发送的时候设置: document.body.scrollTop = this.bfscrolltop;

问题:

 1、在监听失去焦点的时候设置 document.body.scrollTop = this.bfscrolltop 是点不了发送的 (这就触及到我知识的盲区了)

 2、ios 不管型号(可能除了SE)第一次点击评论还是可能会出现半遮盖,或者全遮盖的情况。

 第n次 是在点击评论的时候 加了一个定时器(我不知道为什么这样写就好了!)

created(){
var u = navigator.userAgent;
this.isAndroid =u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //Android终端
this.isIOS =!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //IOS终端 },
methods:{
// 点击评论
commentClick(index){
var that = this;
if(this.isIOS){
setTimeout(function(){
document.body.scrollTop = document.body.scrollTop*1 + 300;
},300)
}
that.$refs.import_inp.focus();
},
// 输入框获得焦点
onFocus(){
var that = this;
this.bfscrolltop = document.body.scrollTop; // 记录当前位置
if(this.isIOS){
setTimeout(function(){
document.body.scrollTop = document.body.scrollTop*1 + 200;
},300)
} },
// 输入框失去焦点
changeBlur(){
var that = this;
// input 输入框 内无内容的情况下点击ios软键盘的完成是可以回去的
if(this.inputVal == ""){
document.body.scrollTop = this.bfscrolltop;
}
},
// 点击发送
sendComment(){
document.body.scrollTop = this.bfscrolltop;
},
},

 注:以上代码只是关于input输入框被遮盖的。

 目前在 iPhone7 iPhone6 iPhoneSE 上没什么问题

问题:

 1、当输入框内有内容的时候,关掉软键盘是不能返回记录的位置的

总结:

 目前只能解决到这个地步了。黔驴技穷。

 有什么好的解决方案还望看到的朋友指点一二。

 根据自己的项目问题选择一个尽可能最好的方法解决