HTML5 虚拟键盘出现挡住输入框的解决办法


Posted in HTML / CSS onFebruary 14, 2017

话不多说,请看代码:

//防止键盘把当前输入框给挡住
$$('input[type="text"],textarea').on('click', function () {
  var target = this;
  setTimeout(function(){
        target.scrollIntoViewIfNeeded();
   },100);
});

部分安卓机型适用。

if(/Android [4-6]/.test(navigator.appVersion)) {
    window.addEventListener("resize", function() {
        if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
            window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
            },0);
        }
    })
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 #HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 #HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 #HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 #HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 #HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 #HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 #HTML / CSS
You might like
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
django celery redis使用具体实践
2019/04/08 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
PHP笔试题
2012/02/22 面试题
学生会招新策划书
2014/02/14 职场文书
文化活动实施方案
2014/03/28 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
村党建工作汇报材料
2014/11/02 职场文书
个人汇报材料范文
2014/12/30 职场文书
尼克胡哲观后感
2015/06/08 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书