您的位置:首页 > 其它

定位底部的输入框被软键盘覆盖解决方案

2017-07-29 10:33 127 查看




1,给输入框添加获取焦点事件和失去焦点事件

当获取焦点事件触发时将页面所有内容滚动到最底部,失去焦点时将之前的内容滚动的高度重新赋给现在的滚轮高度,代码如下:

html :

 <div id="replydiv" style="display:none;" class="reply">

     <li><img src="daily-img/WIFIicon(1).png" width="25" height="30" /></li>

       <!-- 利用div高度自适应属性仿造一个高度自适应的文本域 -->

     <li><div id="textareas" contenteditable="true"></div></li>

     <li><button id="submit">发送</button></li>

  </div>

jquery:

 $(document).ready(function(){

    //解决第三方软键盘覆盖定位在底部input输入框问题

    var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度

    $("#textareas").focus(function(){//在这里‘input.inputframe’是我的底部输入栏的输入框,当它获取焦点时触发事件

        interval = setInterval(function(){//设置一个计时器,时间设置与软键盘弹出所需时间相近

        document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度

        },100)

    }).blur(function(){//设定输入框失去焦点时的事件

        clearInterval(interval);//清除计时器

        document.body.scrollTop = bfscrolltop;//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度

    });
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息