弹出键盘时输入框被遮住

最新推荐文章于 2024-01-11 15:01:23 发布

原创最新推荐文章于 2024-01-11 15:01:23 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#输入框被键盘遮住

前端小知识点专栏收录该内容

69 篇文章

订阅专栏

本文探讨了在移动端开发中，解决输入框被虚拟键盘遮挡的问题，提出了三种有效策略：通过CSS改变输入框位置，调整body高度并滚动至输入框，及使用scrollIntoViewIfNeeded()方法。

在移动端弹出键盘时输入框被遮住，如果使用定位将输入框（input或者textarea）定位到顶部区域,当手机的输入法为自带输入法时可能问题不大，但是当使用类似搜狗等输入法时，由于会高出自带输入法大约30个像素，就会造成输入框被遮盖一部分的现象。

一、根据输入框的焦点来改变输入框的位置

css 当输入框获得焦点, 改变位置

input:focus{

      position:fixed;

      top:50px;

}

二、点击输入框时加长body元素高度到9999px（当然不一定非要这么高），页面滚动到空白区域，再生成输入框添加在当前一屏页面的最顶端。

<html>
 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Examples</title>
        <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
 
            body,
            html {
                padding: 5px;
            }
 
            .scrollDiv {
                width: 100%;
                height: 900px;
                background: #ccc;
                font-size: 24px;
                padding-top: 40px;
                text-align: center;
            }
 
            input {
                -webkit-appearance: none;
                width: 100%;
                display: block;
                margin: 10px auto;
                border-radius: 0px;
                font-size: 16px;
                padding: 12px 10px;
                box-sizing: border-box;
                box-shadow: none;
                border: 1px solid #666;
 
                position: fixed;
                left: 0;
                bottom: 0;
 
            }
        </style>
    </head>
 
    <body style="">
        <div class="main">
            <div class="scrollDiv">滑到最下面</div>
            <input type="text" placeholder="点击我" id="inp">
        </div>
        <script type="text/javascript">
            var inp = document.querySelector('#inp');
            var bodyHeight = document.body.offsetHeight;
            inp.onclick = function(ev) {
                document.querySelector('body').style.height = '99999px';
                inp.style.position = 'static';
                setTimeout(function() {
                    document.body.scrollTop = document.documentElement.scrollTop = inp.getBoundingClientRect().top + pageYOffset - 5;
                }, 50);
                window.addEventListener('touchmove', fn, false);
            }
 
            inp.onblur = function() {
                    document.querySelector('body').style.height = "auto"
                    document.querySelector('body').removeAttribute('style')
                    window.removeEventListener('touchmove', fn, false)
                }
                //触摸取消blur
            function fn(ev) {
                var _target = ev.target || ev.srcElement;
                if(_target.nodeName != 'INPUT') {
                    inp.blur();
                }
                ev.preventDefault()
            };
        </script>
    </body>
 
</html>

三、scrollIntoViewIfNeeded() 方法

Element.scrollIntoViewIfNeeded（）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。

语法节

element.scrollIntoViewIfNeeded(); // 等同于element.scrollIntoViewIfNeeded(true) 
element.scrollIntoViewIfNeeded(true); 
element.scrollIntoViewIfNeeded(false);

参数节

opt_center

一个 Boolean 类型的值，默认为true:

如果为true，则元素将在其所在滚动区的可视区域中居中对齐。
如果为false，则元素将与其所在滚动区的可视区域最近的边缘对齐。根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <meta
      name="viewport"
      content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <style type="text/css">
      input {
        width: 100%;
        height: 50px;
        background-color: darkgreen;
        position: fixed;
        left: 0;
        bottom: 0;
      }
      .lo {
        width: 300px;
        height: 50px;
        background-color: darkcyan;
        text-align: center;
        line-height: 50px;
      }
      .xxx {
        width: 50px;
        height: 1000px;
        background-color: darkgrey;
      }
    </style>
  </head>

  <body>
    <div class="lo">点这里</div>
    <div class="xxx"></div>
    <input type="text" id="txt" />
    <div id="dv"></div>
    <script>
      $(".lo").click(function() {
        $("#txt").css({ position: "relative" });
        $("#txt").focus();
      });

      $('input[type="text"],textarea').on("focus", function() {
        var target = this;
        setTimeout(function() {
          target.scrollIntoViewIfNeeded();
          console.log("scrollIntoViewIfNeeded");
        }, 200);
      });
    </script>
  </body>
</html>