H5 输入框键盘弹出收起

最新推荐文章于 2025-03-23 08:09:02 发布

笑笑1234

最新推荐文章于 2025-03-23 08:09:02 发布

阅读量2.6k

点赞数

文章标签： ios vue 前端 html javascript

本文链接：https://blog.youkuaiyun.com/u014105739/article/details/127782825

版权

1 . 安卓系统下点击输入框键盘弹出以及收起会使得webview 的窗口高度发生变化

键盘弹出的时候：

webview的原高度 = 键盘的高度 + webview 现在的窗口高度

Ios 系统下键盘弹出收起不会影响webview 的窗口高度发生变化

键盘弹出的时候可以监听focusin事件; 键盘收起的时候可以监听focuout 事件; （focusin/focusout 支持冒泡）

但是安卓系统下点击键盘的右边的收起不会触发 focuout事件；只有其他空白处使得光标失去焦点(blur) 才会触发; 所以安卓下可以通过判断 webview 的高度变化来监听键盘的弹出收起；

安卓下 
//获取原窗口的高度
      var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
      window.onresize = function() {
        // alert('高度发现变化')
          //键盘弹起与隐藏都会引起窗口的高度发生变化
          var resizeHeight=document.documentElement.clientHeight || 
           document.body.clientHeight;
          const activeEl = document.activeElement; // 获取当前点击的元素
          if(resizeHeight<originalHeight){
            //当软键盘弹起，在此处操作
            console.log('当软键盘弹起，在此处操作')
            if (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA') {}
          } else {
          //当软键盘收起，在此处操作
            console.log('当软键盘收起，在此处操作')
            if (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA') {
                activeEl.blur
            }
          }
      }

Ios 系统下
document.body.addEventListener("focusin", (e) => {

});
document.body.addEventListener("focusout", () => {
});

单独的input/textarea 监听键盘弹出、收起就监听各自的foucs/blur 事件

参考：

彻底解决H5中键盘遮挡输入框的问题 - 知乎

h5手机键盘弹出收起的处理 | Hzzly