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





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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值