美文网首页Html5专题
移动端 的输入框不让键盘遮挡

移动端 的输入框不让键盘遮挡

作者: lxt410725 | 来源:发表于2017-08-29 20:53 被阅读21次

    var clientHeight = document.body.clientHeight;   

    var _focusElem = null; //输入框焦点   

    //利用捕获事件监听输入框等focus动作  

    document.body.addEventListener("focus", function(e) {       

    _focusElem = e.target || e.srcElement;    }, true);

      //因为存在软键盘显示而屏幕大小还没被改变,所以以窗体(屏幕显示)大小改变为准    window.addEventListener("resize", function() {      

    if (_focusElem &&document.body.clientHeight< clientHeight) {       

        //焦点元素滚动到可视范围的底部(false为底部)         

      _focusElem.scrollIntoView(false);        } 

      });

    相关文章

      网友评论

        本文标题:移动端 的输入框不让键盘遮挡

        本文链接:https://www.haomeiwen.com/subject/amyadxtx.html