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

我尝试使用phonegap移动应用程序（基于html/css/js）进行聊天。问题是TextArea文本输入工作正常，只适用于像4.4旧的Android（这很奇怪，但它是））。在其他设备上：将textarea固定到移动设备上的页面底部（带键盘）

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代码片段，将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

Android的无键盘：

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

的Android与键盘：

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

因此，您可以看到在iOS设备上打开或未打开键盘时（有点）可能会有所不同。在Android设备上，这是不可能的。

那么如何解决在Android的页面底部输入块？它有可能吗？他们有没有一些跨平台解决方案？

预期结果（在桌面版Chrome仿真）：

Without keyboard

Keyboard is opened

来源

2017-05-24 Maryja Piaredryj

也许你可以使页面向下滚动到输入框，通过使用它的id

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

显然，只有当它是一个Android设备时，当你得到关注。

来源

2017-05-24 15:35:04

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

回答

相关问题