H5移動端彈出鍵盤時遮擋輸入框

2017年08月03日 11:00:03 風中乘涼閱讀數：11836

在寫移動端時，如果使用絕對定位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>

下面是第四種方法

//太簡單我就不寫了

//一頓操作

H5移動端彈出鍵盤時遮擋輸入框

H5移動端彈出鍵盤時遮擋輸入框

移動端滑屏 touch事件

解決IE下輸入框不支持placeholder屬性

純css炫酷旋轉

自定義滾動條

css3美化滾動條樣式

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結