别来无恙``
2018-04-08 03:55
采纳率: 66%
浏览 2.6k
已采纳

移动端页面输入法挡住input怎么解决?

提前说一下这个不是app开发,场景是在浏览器中
图片说明

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • 无明之徒 2018-04-08 11:07
    已采纳

    如何解决,请看一下代码:
    <!DOCTYPE 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>
    


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

    打赏 评论
  • 起风了__ 2018-04-08 04:03

    在mainfest.xml中,对那个Activity加:

    打赏 评论
  • liuzongx 2018-04-08 04:06

    android:name=".MainActivity"
    android:windowSoftInputMode="adjustPan" >
    ...

    打赏 评论
  • qq_37911099 2018-04-08 05:08

    需要在清单文件中配置一些东西,你可以查一下

    打赏 评论
  • ZhangTy_ 2018-04-08 05:34

    1.在AndroidManifest.xml中对应的Activity配置:android:windowSoftInputMode="stateVisible|adjustResize"
    2.在该Activity中的onCretae()的setContentView()方法前面添加:getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN)
    3.在布局文件中添加ScrollView

    打赏 评论
  • tylerzhangdi 2018-04-08 06:02
      if ((/Android/gi).test(navigator.userAgent)) {
            window.addEventListener('resize', function () {
                if (document.activeElement.tagName == 'INPUT' || 
                    document.activeElement.tagName == 'TEXTAREA') {
                    window.setTimeout(function () {
                        document.activeElement.scrollIntoViewIfNeeded();
                    }, 0);
                }
            });
        } 
    
    打赏 评论
  • qq_41654522 2018-04-08 06:16

    你可以试试在mainfest.xml中,对Activity加上“:”,用英文格式

    打赏 评论

相关推荐 更多相似问题