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美化表单控件全集
Jun 29 HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 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 删除数组元素
2009/01/16 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
php微信开发自定义菜单
2016/08/27 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python命名空间详解
2014/08/18 Python
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
Python中__name__的使用实例
2015/04/14 Python
Python多进程机制实例详解
2015/07/02 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
详谈python http长连接客户端
2017/06/12 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python实现猜拳游戏项目
2020/11/30 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
吃空饷专项治理工作实施方案
2014/03/04 职场文书
副董事长岗位职责
2014/04/02 职场文书
同居协议书范本
2014/04/23 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
导游欢迎词范文
2015/01/23 职场文书
前台文员岗位职责
2015/02/04 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python