如何使用 android 上的键盘使元素向上移动（HTML 5 应用程序）答案

【问题标题】：How to make an element move up with the keyboard on android (HTML 5 app)如何使用 android 上的键盘使元素向上移动（HTML 5 应用程序）
【发布时间】：2017-06-05 20:17:10
【问题描述】：

我想让我固定在屏幕底部的文本字段随着键盘向上移动，基本上让它粘在键盘上。 This is how it looks without the keyboard, the element I want to move up with the keyboard is the footer. 当键盘弹出时，它现在会越过输入字段，因此您看不到您输入的内容。我该如何解决这个问题？提前致谢！

这部分的html：

    <footer class="mdl-shadow--8dp">
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="addItemDescription">
            <label class="mdl-textfield__label" for="addItemDescription">What do I need to do?</label>
        </div>
        <button id="addItemButton" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--2dp">
        <img class="material-icons" src="./res/material_icons/ic_add_white_24px.svg"></img>
        </button>
    </footer>

还有 CSS：

    footer{
    position: fixed;
    z-index: 700;
    text-align: center;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #bdbdbd;
}

.mdl-textfield__label{
    color: #4c4c4c;
    font-size: 30px;
}

.mdl-textfield__label:after{
    background: #f2f2f2;
}

.mdl-button--fab.mdl-button--colored {
    background:  #778f9b;
}

.mdl-button--fab.mdl-button--colored:hover {
    background:  #8d8d8d ;
}

#addItemButton{
    position: absolute;
    margin-left: 50px;
    margin-top: -45px;
}

【问题讨论】：

您正在使用 android native 工作？或者你可以在清单文件中添加值吗？

标签： android css

【解决方案1】：

使用 jQuery，获取 input> 标签的 offset().top 值，然后使用 scrollTop( )

var $htmlOrBody = $('html, body'), // scrollTop works on <body> for some browsers, <html> for others
scrollTopPadding = 8;

$('input').focus(function() {
// get input tag's offset top position
var textareaTop = $(this).offset().top;
// scroll to the textarea
$htmlOrBody.scrollTop(textareaTop - scrollTopPadding);

// OR  To add animation for smooth scrolling, use this. 
//$htmlOrBody.animate({ scrollTop: textareaTop - scrollTopPadding }, 200);

});

【讨论】：

谢谢，但这不起作用。它会在项目列表中滚动，但不会移动页脚，并且在没有键盘时也会滚动。
drive.google.com/open?id=0BzKLcVvi2cgTRDBCQ1F5Skc5Vms我不知道你说的标记是什么意思，但是在右边你可以看到点击输入之前的样子，在左边你可以看到点击的结果输入。
所以我还有一个建议。您能否在 textField 下方添加一个 div，并在您专注于 textField 时为其提供 60px 的静态高度。不在焦点时也将其隐藏。这可能是一个热修复。到时候我会寻找更好的解决方案。
请注意，页脚的位置是固定的，因此在其下方添加静态元素不会影响它，尽管我非常感谢您的努力。

【解决方案2】：

如果找到一种有效的方法，它并不是很完美，但效果很好。它的工作原理如下：单击输入时运行一个函数，检查设备是否为手机，然后将 50vh 添加到页脚的 padding-bottom。当输入变得模糊时，还有一个函数会运行，这个函数会重置填充。

css 看起来像这样：

footer{
    position: fixed;
    z-index: 700;
    text-align: center;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #bdbdbd;
}

JS（有点jquery）看起来像这样：

document.querySelector(DOM.description).addEventListener('click', input);
document.querySelector(DOM.description).addEventListener('blur', uniput);

var input = function(){
        if(document.querySelector(DOM.description) === document.activeElement){
            console.log('focused');

            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
                $('footer').css({'padding-bottom': '50vh'})
            }
    }
};

var uniput = function(){
    $('footer').css({'padding-bottom': '1rem'})
    }

这并不难，但需要一些时间来找出是否有更好的方法，但这实际上效果很好。

【讨论】：