美文网首页
在开发移动端webapp时遇到input,获得焦点键盘挡住输入框

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

作者: 坚强一点 | 来源:发表于2016-10-15 17:19 被阅读0次

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

    当容器设置了 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);

    }

    })

    相关文章

      网友评论

          本文标题:在开发移动端webapp时遇到input,获得焦点键盘挡住输入框

          本文链接:https://www.haomeiwen.com/subject/hjemettx.html