在开发移动端webapp时遇到input,获得焦点键盘挡住输入框的bug

在开发移动端网页的时候遇到 键盘挡住输入框的情况

当容器设置了 overflow:hidden 属性的时候,导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug

// 相关 issue: https://github.com/weui/weui/issues/15

// 解决方法:

// 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题

// 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element

//    Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把

if (/Android/gi.test(navigator.userAgent)) {

window.addEventListener('resize', function () {

if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {

window.setTimeout(function () {

document.activeElement.scrollIntoViewIfNeeded();

}, 0);

}

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容