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悬停效果案例应用
Nov 21 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
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
Zend 输出产生XML解析错误
2009/03/03 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
PHP 危险函数全解析
2009/09/09 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
Python中的变量和作用域详解
2016/07/13 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
详解python的数字类型变量与其方法
2016/11/20 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
自我鉴定怎么写
2013/12/05 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
婚礼答谢礼品
2015/01/20 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL