当前位置: > > > HTML5 - 虚拟键盘出现挡住输入框的解决办法

HTML5 - 虚拟键盘出现挡住输入框的解决办法

1,问题描述
我们使用 H5 做移动 App,或者进行移动网站开发时。如果文本输入框在整个页面的下方,当我们点击输入框要输入文字时,系统弹出的虚拟键盘就会将输入框给挡住。(这个只有在Android 系统下会有这个问题,iOS 系统会自动将整个页面上移动。)
         

2,解决办法
我们可以借助元素的 scrollIntoViewIfNeeded() 方法。这个方法执行后如果当前元素在视口中不可见,则会滚动浏览器窗口或容器元素,最终让它可见。如果当前元素在视口中已经是可见的,这个方法什么也不做。

3,样例代码
这里使用了 jQuery 绑定了所有输入框(textinputtextarea)的点击事件,这样当输入框被点击后就调用它的 scrollIntoViewIfNeeded() 方法,保证输入框可见。(延迟400毫秒出现时有些 Android 手机键盘出现的比较慢)
  //防止键盘把当前输入框给挡住
  $$('input[type="text"],textarea').on('click', function () {
    var target = this;
    setTimeout(function(){
          target.scrollIntoViewIfNeeded();
          console.log('scrollIntoViewIfNeeded');
        },400);
  });
最终效果:

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作。

打赏支持
评论0