admin管理员组文章数量:1564202
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>
文章不定期更新,喜欢可给like!
版权声明:本文标题:解决ios底部固定输入框,获取焦点时弹出输入法键盘挡住输入框 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1727480477a1116765.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论