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 相关文章推荐
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
从0开始学Vue
Oct 27 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
JS实现拼图游戏
Jan 29 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
PHP数组交集的优化代码分析
2011/03/06 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
jQuery动画特效实例教程
2014/08/29 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
js实现下一页页码效果
2017/03/07 Javascript
js a标签点击事件
2017/03/30 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Django实现文件上传下载
2019/10/06 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Java里面如何创建一个内部类的实例
2015/01/19 面试题
教师演讲稿范文
2014/01/08 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
初中物理教学反思
2014/01/14 职场文书
《小池塘》教学反思
2014/02/28 职场文书
店铺转让协议书
2015/01/29 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js