H5虚拟键盘挡住输入框怎么办


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来H5虚拟键盘挡住输入框怎么办,H5虚拟键盘挡住输入框的注意事项有哪些,下面就是实战案例,一起来看一下。

话不多说,请看代码:

1

2

3

4

5

6

7

//防止键盘把当前输入框给挡住

$$('input[type="text"],textarea').on('click', function () {

  var target = this;

  setTimeout(function(){

        target.scrollIntoViewIfNeeded();

   },100);

});

部分安卓机型适用。

1

2

3

4

5

6

7

8

9

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);

        }

    })

}

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

H5的存储方式详解

zepto实现移动端无缝向上下滚动

以上就是H5虚拟键盘挡住输入框怎么办的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5是什么技术

HTML5实现清空画布的三种方法

HTML5实战-canvas绘制钟表的示例代码分享

HTML5移动端手机网站开发流程

HTML5 table标签的样式介绍(另附HTML5 table css居中的实例)

HTML5中设置或返回音频/视频是否默认静音的属性defaultmuted

详解HTML5浏览器兼容性解决方案

怎样用h5的webgl实现3d虚拟机房的漫游动画

HTML5本地存储之localstorage、sessionstorage的具体分析

HTML5新增加的标签有哪些

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...