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圆角边框和边框阴影示例
May 05 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
前端水印的简单实现代码示例
Dec 02 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php array_search() 函数使用
2010/04/13 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
js同时按下两个方向键
2007/12/01 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
如何基于Python创建目录文件夹
2019/12/31 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
大一军训感言
2014/01/09 职场文书
领导检查欢迎词
2014/01/14 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
合作协议书模板2014
2014/09/26 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2014年招生工作总结
2014/11/26 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
作文评语集锦
2014/12/25 职场文书
2016党校学习心得体会
2016/01/07 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android