將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固定到移動設備上的頁面底部（帶鍵盤）

回答

相關問題