H5移动端弹出键盘时遮挡输入框

最新推荐文章于 2024-06-04 09:15:09 发布

风中乘凉

最新推荐文章于 2024-06-04 09:15:09 发布

阅读量2.9w

点赞数 4

分类专栏：前端开发文章标签：移动手机 javascript html5 输入法

本文链接：https://blog.csdn.net/qq_37231097/article/details/76614702

版权

前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

下边简单说说简单的解决思路，当然还有复杂的。

延时一定时间重新定位输入框。
点击输入框时加长body元素高度到9999px（当然不一定非要这么高），页面滚动到空白区域，再生成输入框添加在当前一屏页面的最顶端。
借助元素的 scrollIntoViewIfNeeded() 方法。这个方法执行后如果当前元素在视口中不可见，则会滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中已经是可见的，这个方法什么也不做。
页面跳转或者显示隐藏（无疑是最简单的，但是可能不能满足产品的要求，或者有点low，但是网页版的微博就是如此）。

今天我们生产代码，不再是代码的搬运工。

下面是第一种方法

//点击评论框

var bfscrolltop = 0;//获取软键盘唤起前浏览器滚动部分的高度
$('input[type="text"],textarea').focus(function() {
    //给个延迟
    bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
    interval = setInterval(function() {
        document.body.scrollTop = document.body.scrollHeight}, 100
    );
    window.addEventListener('touchmove', fn, false);    

    }).blur(function(){
        clearInterval(interval);  
    });
//如果你的页面中使用了iscorll插件，这时候你需要处理评论框的滑动事件————拒绝滑动
function fn(ev) {
    var _target = ev.target || ev.srcElement;
    if(_target.nodeName != 'TEXTAREA') {
        $('.pinglun_footerr_text').blur();
    }   
};

下面是第二种方法

<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>

下面是第三种方法

<!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>
//          var timer, windowInnerHeight;
//
//          function eventCheck(e) {
//              if(e) { //blur,focus事件触发的
//                  
//                  $('#dv').html('android键盘' + (e.type == 'focus' ? '弹出' : '隐藏') + '--通过' + e.type + '事件');
//                  if(e.type == 'click') { //如果是点击事件启动计时器监控是否点击了键盘上的隐藏键盘按钮，没有点击这个按钮的事件可用，keydown中也获取不到keyCode值
//                      setTimeout(function() { //由于键盘弹出是有动画效果的，要获取完全弹出的窗口高度，使用了计时器
//                          windowInnerHeight = window.innerHeight; //获取弹出android软键盘后的窗口高度
//                          timer = setInterval(function() {
//                              eventCheck()
//                          }, 100);
//                      }, 500);
//                  } else clearInterval(timer);
//              } else { //计时器执行的，需要判断窗口可视高度，如果改变说明android键盘隐藏了
//                  if(window.innerHeight > windowInnerHeight) {
//                      clearInterval(timer);
//                      $('#dv').html('android键盘隐藏--通过点击键盘隐藏按钮');
//                  }
//              }
//          }
//          $('#txt').click(eventCheck).blur(eventCheck);


    $(".lo").click(function(){
        $("#txt").css({position:"relative"})
        $("#txt").focus();
        /*setTimeout(function(){
            target.scrollIntoViewIfNeeded();
            //target.scrollIntoView(true);
            console.log('scrollIntoViewIfNeeded');
        },00);*/
    })

    $('input[type="text"],textarea').on('focus', function () {

        var target = this;
        setTimeout(function(){
            target.scrollIntoViewIfNeeded();
            //target.scrollIntoView(true);
            console.log('scrollIntoViewIfNeeded');
        },200);
    });









    /*      
    var clientHeight = document.body.clientHeight;
    var _focusElem = null; //输入框焦点
    //利用捕获事件监听输入框等focus动作
    document.body.addEventListener("focus", function(e) {
        _focusElem = e.target || e.srcElement;
       console.log(111)
    }, true);
    //因为存在软键盘显示而屏幕大小还没被改变，所以以窗体（屏幕显示）大小改变为准
    window.addEventListener("resize", function() {
        alert(222)
        setTimeout(function(){
            _focusElem.scrollIntoViewIfNeeded();
            //console.log('scrollIntoViewIfNeeded');
        },200);
            //焦点元素滚动到可视范围的底部(false为底部)
       // _focusElem.scrollIntoView(true);

    });*/

//          setTimeout(function(){
//              target.scrollIntoViewIfNeeded();
//              console.log('scrollIntoViewIfNeeded');
//          },200);
//          


        </script>

    </body>

</html>

下面是第四种方法

//太简单我就不写了

//一顿操作

风中乘凉

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
H5移动端弹出键盘时遮挡输入框

在写移动端时，如果使用绝对定位Fixed将输入框（input或者textarea）,当手机的输入法为自带输入法时可能问题不大，但是当使用类似搜狗等输入法时，由于会高出自带输入法大约30个像素，就会造成输入框被遮盖一部分的现象，很尴尬。下边简单说说简单的解决思路，当然还有复杂的。延时一定时间重新定位输入框。点击输入框时加长body元素高度到9999px（当然不一定非要这么高），页面滚动到空白区域，
复制链接

扫一扫