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使用技巧5个
Apr 02 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 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
php访问查询mysql数据的三种方法
2006/10/09 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
基于python实现KNN分类算法
2020/04/23 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
新三好学生主要事迹
2014/01/23 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
2014年终工作总结范本
2014/12/15 职场文书
异地恋情人节寄语
2015/02/28 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
化工生产实习心得体会
2016/01/22 职场文书
导游词之太原天龙山
2020/01/02 职场文书
Golang的继承模拟实例
2021/06/30 Golang
Golang并发工具Singleflight
2022/05/06 Golang
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技