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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
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
php.ini中文版
2006/10/09 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
javascript的键盘控制事件说明
2008/04/15 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
SVG描边动画
2017/02/23 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
node后端服务保活的实现
2019/11/10 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
Python实现购物车购物小程序
2018/04/18 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
python os模块在系统管理中的应用
2020/06/22 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
JAVA高级程序员面试题
2013/09/06 面试题
材料加工硕士生求职信
2013/10/10 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
个人简历自我评价范文
2014/02/04 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
询价采购方案
2014/06/09 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
开平碉楼导游词
2015/02/06 职场文书
辞职信格式模板
2015/02/27 职场文书
单位收入证明范本
2015/06/18 职场文书
公司财务管理制度
2015/08/04 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
js不常见操作运算符总结
2021/11/20 Javascript