ios移动端软键盘收起后input输入框焦点错位或无法输入解决

2 篇文章 0 订阅
1 篇文章 1 订阅
本文为开发中遇到的问题解决方案总结:ios移动端软键盘收起后input输入框焦点错位或无法输入解决
问题描述:

页面背后是可滚动的列表,前面是弹出框,里面有需要输入值的input框。当打开键盘后,弹出框跟后面的列表都会被顶上去一段距离,当再关闭键盘就可能出现:前面的弹出框回到了原来的位置,而后面的列表依然是顶上去的位置。这时后再去点击弹出框的输入框或者按钮的时候发现焦点依然停留在键盘弹出后顶上去的位置,造成了弹出层焦点错位。
只有手动滑动后面的列表到原来位置后,弹出层的焦点才会恢复。

解决方案:

1

let isReset = true;
const u = navigator.userAgent;
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {//ios
    document.body.addEventListener('focusin', () => {
      //软键盘弹出的事件处理
      isReset = false;
    });
    document.body.addEventListener('focusout', () => {
      //软键盘收起的事件处理
      isReset = true;
      setTimeout(() => {
      	//当焦点在弹出层的输入框之间切换时先不归位
        if (isReset) {
          window.scroll(0, 0);//失焦后强制让页面归位
        }
      }, 300);
    });
  } else if (isAndroid) {//android
    window.onresize = function () {
      //键盘弹起与隐藏都会引起窗口的高度发生变化
      let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if (resizeHeight < h) {
        //当软键盘弹起,在此处操作
        isReset = false;
      } else {
        //当软键盘收起,在此处操作
        isReset = true;
        setTimeout(() => {
          if (isReset) {
            window.scroll(0, 0);//失焦后强制让页面归位
          }
        }, 300);
      }
    }
  }

如果使用的react框架,可直接复制上述代码到componentDidMount()中
参考>文章内容参考 https://blog.csdn.net/qq_23179075/article/details/86497498

2:
输入框所在的元素用了position:fixed,安卓端一切正常,ios系统在input失焦后键盘缩回去了但是页面不归位。可能原因:键盘事件触发,导致position:fixed失效。

$("input").on("blur",function(){
	window.scroll(0,0);//失焦后强制让页面归位
});

3:
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位。

解决方案:给输入框(或select选择框)添加失去焦点的事件,当输入框失去焦点,页面自动滚动到顶部,并且需要加定时器,否则偶尔会失效

$("input,textarea,select").blur(function(){
   setTimeout(function() {
       var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
       window.scrollTo(0, Math.max(scrollHeight - 1, 0));
       }, 100);
    })
PS:

window.scroll()方法已废弃,该方法已经使用了 scrollTo() 方法来替代。建议使用window.scrollTo()
scrollTo(xpos,ypos),可把内容滚动到指定的坐标。
微信中遇到的坑:https://gitee.com/linguanhua/codes/jyeoqxtvmwcir7pzsak9l98

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在微信小程序开发中,如果在iOS手机上遇到了键盘弹起时会遮挡上面内容的问题,可以通过以下方法解决。 首先,我们需要获取键盘的高度。在小程序中,可以使用wx.getSystemInfoSync()方法来获取系统信息,其中包括键盘的高度。 接下来,我们需要监听键盘的弹起和隐藏事件。可以通过监听页面的focus和blur事件来实现。当input框被选中时(focus事件),我们可以将页面整体上移一个键盘高度的距离,以保证输入框不被键盘遮挡。当input框失去焦点时(blur事件),我们将页面恢复到原始位置。 具体实现时,可以在页面的onLoad生命周期函数中调用wx.getSystemInfoSync()方法获取系统信息,并存储键盘的高度。然后在页面的focus和blur事件中分别设置页面的上下边距,以达到上移和恢复的效果。 示例代码如下: ``` // 在页面的onLoad生命周期函数中获取系统信息 onLoad: function() { var that = this; wx.getSystemInfoSync({ success: function(res) { that.setData({ keyboardHeight: res.windowHeight * 0.75 // 假设键盘高度占屏幕高度的3/4 }); } }); }, // input框获取焦点时的事件处理函数 onFocus: function() { this.setData({ marginTop: -this.data.keyboardHeight }); }, // input框失去焦点时的事件处理函数 onBlur: function() { this.setData({ marginTop: 0 }); } ``` 需要注意的是,根据不同手机型号和键盘设置的不同,键盘的高度可能会有所差异,因此上述代码中获取到的键盘高度是一个近似值,可以根据实际情况进行调整。 以上是解决微信小程序开发中iOS手机键盘弹起时会遮挡上面内容的一种方法,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值