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

        }

    })

}

相关推荐:
虚拟键盘,移动web开发的痛_html/css_WEB-ITnose

打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)_jquery

jquery实现页面虚拟键盘特效_jquery

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

相关阅读 >>

详解HTML5幻灯片系统--h5slides

HTML5实现上传图片预览效果代码

使用HTML5 canvas api中的clip()方法裁剪区域图像代码实例

html h1标签怎么居中?有关于html中的h1居中实例解析

具体介绍HTML5-创建html文档

HTML5调用摄像头功能的实现代码

总结HTML5中新表单元素的使用方法及实例教程

详细介绍基于HTML5 的webgl技术构建3d场景的图文代码(一)

h5怎样做出日历校验功能

HTML5实现移动页面自适应手机屏幕的方法

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




打赏

取消

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

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

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

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

评论

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