Question

我正在使用html5 / javascript / jQuery / css进行移动应用开发。 HTML正文包含Header，footer和中间一个div。页脚由一个文本框组成，用户可以在其中输入输入。每当用户触摸文本框时，都会弹出键盘。问题是每当键盘弹出时html主体都不会向上移动。如何实现相同？它应该与所有移动设备（Android，iOS，Windows）兼容。

这是我的html代码

withRouter

Answer 1

无法检测虚拟键盘是否存在，但您无需这样做。

我在您的html中找不到您的输入框，所以我只假定它的ID为'textInput'

let textInput = $("#textInput")
//When the input box gets focused you just have to scroll it into view
textInput.focusin((event) => {
    var elem = event.currentTarget;
    //scrollIntoViewIfNeeded is non standard but supported in many browsers
    if(elem.scrollIntoViewIfNeeded !== undefined) {
        elem.scrollIntoViewIfNeeded()
    } else if(elem.scrollIntoView !== undefined){
        elem.scrollIntoView()
    } else {
        //Fallback if scrollIntoView is not supported
        var offset = textInput.offset()
        $('html, body').animate({
            scrollTop: offset.top,
           scrollLeft: offset.left
        })
    }
})

#textInput {
  position: fixed;
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="textInput" type="text">

像键盘一样弹出键盘时滚动整个html / body

1 个答案: