如何解决HTML5 虚拟键盘出现挡住输入框的问题


本文摘自PHP中文网,作者不言,侵删。

本文主要介绍了HTML5 虚拟键盘出现挡住输入框的解决办法。具有很好的参考价值,下面一起来看下吧

话不多说,请看代码:

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中文网!

相关推荐:

HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能

使用HTML5 Canvas绘制阴影效果的方法

以上就是如何解决HTML5 虚拟键盘出现挡住输入框的问题的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

利用HTML5 实现3d 网络拓扑树(图文详解)

htnl5利用svg页面高斯模糊的方法

HTML5中的script属性及js同步和异步加载实现代码详解

HTML5利用canvas绘画二级树形结构图

h5如何做出碎片式的图片切换

HTML5中overflow是什么意思

flash和HTML5的区别有哪些

HTML5 边框怎么设置

HTML5如何插入可自动播放的音频(图文)

html如何修改日期样式

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




打赏

取消

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

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

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

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

评论

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

    正在狠努力加载,请稍候...