解決ios底部固定輸入框,獲取焦點時彈出輸入法鍵盤擋住輸入框
阿新 • • 發佈:2018-11-04
ios端比較常見的,就是在頁面底部固定的輸入框,如下,一旦獲取焦點,彈出的輸入法鍵盤就會把input輸入框完全擋住,解決方法很簡單,加上下面的幾行程式碼即可
$(".replay_text").on("click", function() {
setTimeout(function(){
document.body.scrollTop = document.body.scrollHeight;
},300);
})
完整dome:
<template> <div class="templ"> <div>123</div><br /> <div>123</div><br /> <div>123</div><br /> <div>123</div><br /> <div>123</div><br /> <br /><br /><br /> <div>123</div><br /> <div>123</div><br /> <div>123</div><br /> <div>123</div><br /> <br /><br /><br /> <div>123</div><br /> <div>123</div><br /> <div>123</div><br /> <div>123</div><br /> <div class="replyBox"> <div class="reply"> <textarea class="replay_text" rows="1" cols="10" maxlength="140" autofocus="autofocus" ref="content" :placeholder="placeText"/> <button class="send">傳送</button> </div> </div> </div> </template> <script> export default { data() { return { }; }, mounted() { $(".replay_text").on("click", function() { setTimeout(function(){ document.body.scrollTop = document.body.scrollHeight; },300); }) } } </script> <style scoped lang="less"> .replyBox{ width: 100%; height: 0.8rem; padding: 0.1rem 0.2rem; position: fixed; bottom: 0; background: #fff; font-size: 0.26rem; border-top: 0.01rem solid #f2f2f2; z-index: 1; .reply{ height: 100%; display: flex; justify-content: space-between; textarea{ height: 100%; outline: none; background: #f2f2f2; padding: 0.1rem 0.1rem; border: none; resize: none; caret-color: #fc9729; } .send{ display: inline-block; padding: 0.1rem 0.1rem; width: 18%; border-radius: 0.06rem; color: #fff; font-size: 0.28rem; background: #ffb955; text-align: center; margin-left: 0.2rem; } } } </style>