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

来源:互联网 发布:自动化行业用单片机吗 编辑:程序博客网 时间:2024/05/17 02:20





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;//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
    });

阅读全文
0 0
原创粉丝点击