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>