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

ZhangXianSheng

发布于 2019-05-28 12:09:30

1.9K0

发布于 2019-05-28 12:09:30

1，问题描述

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

2，解决办法

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

3，样例代码

这里使用了 jQuery 绑定了所有输入框（textinput、textarea）的点击事件，这样当输入框被点击后就调用它的 scrollIntoViewIfNeeded() 方法，保证输入框可见。（延迟400毫秒出现时有些 Android 手机键盘出现的比较慢）

1 2 3 4 5 6 7 8	//防止键盘把当前输入框给挡住 $('input[type="text"],textarea').on('click', function () { var target = this; setTimeout(function(){ target.scrollIntoViewIfNeeded(); console.log('scrollIntoViewIfNeeded'); },400); });

最终效果：

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度