js解决软键盘遮挡输入框的问题分享


Posted in Javascript onDecember 19, 2017

经验须知

弹出软键盘时:

ios端$(‘body').scrollTop()会改变

android端$(window).height()会改变

拉起键盘不是一瞬间,而是有一个缓动过程

问题重现

ios端,经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法,如:百度输入法),如图:

js解决软键盘遮挡输入框的问题分享

问题解决

我们只需要在输入框聚焦之后,开启一个定时器,执行$(‘body').scrollTop(1000000),这样由于整个body滚动到了最下面,输入框自然就看见了,具体请查看以下示例

示例源码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
  <title>demo</title> 
  <script src="../js/jquery-1.11.3.min.js"></script>
  <style> 
    * { 
      margin: 0;  
      padding: 0; 
    } 
    body, html { 
      width: 100%; 
      height: 100%;
    } 
    .bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      font-size: 0;
    }
    input {
      font-size: 14px;
      box-sizing: border-box;
      width: 50%;
      height: 50px;
      line-height: 50px;
    }
  </style> 
</head> 
<body>
  <div class="bottom">
    <input class="aInput" type="text" placeholder="ios聚焦后会被输入法遮挡" />
    <input class="bInput" type="text" placeholder="ios聚焦后不会被输入法遮挡" />
  </div>
</body> 
<script> 
  $(function() {
    // 解决输入法遮挡
    var timer = null;
    $('.bInput').on('focus', function() {
      clearInterval(timer);
      var index = 0;
      timer = setInterval(function() {
        if(index>5) {
          $('body').scrollTop(1000000);
          clearInterval(timer);
        }
        index++;
      }, 50)
    })
  });

</script> 
</html>

以上这篇js解决软键盘遮挡输入框的问题分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
Angular2实现组件交互的方法分析
Dec 19 #Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 #Javascript
jquery自定义显示消息数量
Dec 19 #jQuery
基于Vue开发数字输入框组件
Dec 19 #Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
从setTimeout看js函数执行过程
Dec 19 #Javascript
mongoose更新对象的两种方法示例比较
Dec 19 #Javascript
You might like
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
JavaScript日历实现代码
2010/09/12 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
使用python Django做网页
2013/11/04 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
python批量修改xml属性的实现方式
2020/03/05 Python
pandas DataFrame运算的实现
2020/06/14 Python
区分python中的进程与线程
2020/08/13 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
食品业务员岗位职责
2014/03/18 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python