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 相关文章推荐
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
详解小程序云开发数据库
May 20 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
Prototype Array对象 学习
2009/07/19 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
医药工作者的求职信范文
2013/09/21 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
小班开学寄语
2014/04/04 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
python非标准时间的转换
2021/07/25 Python