解决移动端输入法挡住输入框的办法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决移动端输入法挡住输入框的办法相关的知识，希望对你有一定的参考价值。

      做过hybrid app的朋友都会使用这样过这样的开发模式，app是原生的，里面的内容是移动web。以安卓为例，安卓app里面内容会使用一个webview控件来加载移动web，webview控件设置了全屏。那么问题来了，假如是一个表单页面，里面有很多的输入框，点击最顶部的输入框的时候，移动端的输入法就会挡住最底部的输入框，无法看到输入框里面的内容。

      如何解决，请看一下代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>移动端输入法挡住输入框</title>
        <style>
            input {
                width: 100%;
                line-height: 1.5rem;
                border: 1px solid red;
            }
            
            .block-fill {
                height: 500px;
            }
        </style>
    </head>

    <body>

        <div id="main">
            <!--占位div-->
            <div class="block-fill"></div>
            <!--需要聚焦-->
            <input id="input" type="text"></input>
        </div>

    </body>
    <script>
        //获取页面高度
        var clientHeight = document.body.clientHeight;
        //设置监听聚焦事件
        document.body.addEventListener("focus", function(e) {
            var focusElem = document.getElementById(‘input‘)
        }, true);
        //设置监听窗口变化时间
        window.addEventListener("resize", function() {
            if(focusElem && document.body.clientHeight < clientHeight) {
                //使用scrollIntoView方法来控制输入框
                focusElem.scrollIntoView(false);
            }
        });
    </script>

</html>

         通过js就很轻松的解决这个问题。（我开始以为需要app那边去设置）

 

以上是关于解决移动端输入法挡住输入框的办法的主要内容，如果未能解决你的问题，请参考以下文章

移动端H5页面_input获取焦点时，虚拟键盘挡住input输入框解决方法

移动端输入法挡住输入框

input textarea 获取焦点挡住输入法 解决办法

移动端解决input被输入法挡住的问题

移动端输入框被手机键盘挡住

移动端中 H5输入框在弹起键盘后被遮挡