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的transform造成z-index无效解决方案
Dec 04 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 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
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
Python 实现微信防撤回功能
2019/04/29 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
责任书格式范文
2014/07/28 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
庆祝儿童节标语
2014/10/09 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS