移动端webapp开发:软键盘覆盖到输入框,导致输入的内容无法看到解决办法

软键盘覆盖到输入框,导致输入的内容无法看到,IOS可以忽略(IOS自动会把内容顶到键盘上方),以上为安卓用户移动WEB开发软键盘覆盖到输入框的解决办法!

首先说明这此问题CSS3是无法解决的,所以我使用的jQuery绑定了所有输入框(textinput、textarea)的点击事件,这样当输入框被点击后就调用它的 scrollIntoViewIfNeeded() 方法,保证输入框可见。(延迟400毫秒出现时有些 Android 手机键盘出现的比较慢)。

下面开始分享解决的代码:

    $('input[type="text"],textarea').on('click', function () {
        var target = this;
        setTimeout(function(){
            target.scrollIntoViewIfNeeded();
            console.log('scrollIntoViewIfNeeded');
        },400);
    });

成功解决安卓软键盘覆盖到输入框问题。

原创文章,作者:管理员,如若转载,请注明出处:http://www.bajiege.com/devtech/javascript/mobile-webapp-development-keyboard-cover-the-input-box.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据