在移动设备上将 textarea 固定到页面底部（带键盘）答案

【问题标题】：Fix textarea to the bottom of the page (with keyboard) on mobile devices在移动设备上将 textarea 固定到页面底部（带键盘）
【发布时间】：2017-05-24 15:09:39
【问题描述】：

我尝试使用 phonegap 移动应用程序（基于 html/css/js）进行聊天。问题是用于文本输入的TextArea 只能在像 4.4 这样的旧 Android 上正常工作（这很奇怪，但确实如此））。在其他设备上：

TextArea 在手机键盘打开时隐藏（Android 5
iOS 9<:>TextArea 固定在顶部，但键盘和TextArea.Chat screen on iPad 之间有一些奇怪的间隙

聊天窗口布局如下：

HTML

<div class="chat">    
  <div class="chat__text-input">
    <div class="chat__btn chat__btn--add-photo"></div>
    <div class="chat__textarea">
      <textarea id="messageText" placeholder="Type here..."></textarea>
    </div>
    <div class="chat__btn chat__btn--send"></div>
  </div>
</div>

CSS

.chat {
    background-color: #ffe5d8;
    height: 100%;
    min-height: 100vh;
}
.chat__text-input {
    position: fixed;
    bottom: 0;
    z-index: 49;
    background-color: #fff;
    left: 0;
    right: 0;
    width: 100%;
    height: 85px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 0 2.95%;
}

理论上TextArea固定底部定位就足够了。但它不起作用。因此，我尝试编写一个 JS sn-p 将TextArea 块独立于底部位置放在正确的位置。

addEventListenerBySel('#messageText', 'focus', function () {
    var screenH = window.innerHeight,
        topPos = screenH - 85; //85px - height of the textarea block
    document.getElementsByClassName('chat__text-input')[0].setAttribute("style", "bottom: auto; top: " + topPos + "px");
});
addEventListenerBySel('#messageText', 'blur', function () {
    document.getElementsByClassName('chat__text-input')[0].setAttribute("style", "");
});

function addEventListenerBySel(selector, event, fn) {
    var list = document.querySelectorAll(selector);
    for (var i = 0, len = list.length; i < len; i++) {
        list[i].addEventListener(event, fn, false);
    }
}

但它也不起作用。我测试了窗口高度的三个函数的输出。结果：

没有键盘的 iPad：

document.documentElement.clientHeight 480
window.innerHeight 480
window.outerHeight 0

带键盘的 iPad：

document.documentElement.clientHeight 480
window.innerHeight 211
window.outerHeight 0

没有键盘的安卓：

document.documentElement.clientHeight 592
window.innerHeight 592
window.outerHeight 592

带键盘的安卓：

document.documentElement.clientHeight 592
window.innerHeight 592
window.outerHeight 592

因此您可以看到，在 iOS 设备上，键盘打开与否可能（以某种方式）有所不同。在 Android 设备上，这是不可能的。

那么如何在 Android 上修复页面底部的输入阻塞？有可能吗？有没有一些跨平台的解决方案？

预期结果（在桌面 Chrome 中模拟）：

Without keyboard

Keyboard is opened

【问题讨论】：

标签： javascript android html css phonegap-build

【解决方案1】：

您可以通过使用它的 id 使页面向下滚动到输入框

myTextArea = document.getElementById("messageText");
window.location.hash = "#"+myTextArea.id;

显然，只有当你获得焦点时它是 Android 设备时才这样做。

【讨论】：