ios移动端 软键盘收起后,页面内容不下滑

ios移动端输入内容,软键盘弹出,页面内容整体上移。
但是键盘收起,页面内容不下滑。
安卓没问题。

 <style>
.chat_footer{
    bottom:0;
    left:5%;right:5%;width:90%;
    position:absolute;
}
textarea{
    width:90%;
    padding-left: 0.1rem;
    max-height: 6.15rem;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    resize: none;
    height: 1.5rem;
    width: 100%;
    line-height: 1.5rem;
    font-size: .75rem;
    background: #efeff4;
    border-radius: .2rem;
    border: none;
    outline: none;
    height: 25px;
}
.chat_footer.on{
    border-top:1px solid #eee;
}
</style>
<body>
<div class="chat_footer on" >
    <textarea id="text"></textarea>
</div>

6个回答

这应该是ios系统下,键盘事件触发,导致position:fixed失效,导致的显示问题,只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果。

qq_40061469
qq_40061469 中间部分具体是哪块,能详细说一下吗?谢谢大佬
一年多之前 回复
qq_38337985
54D小童鞋 中间部分是指手机和h5页面之间吗
一年多之前 回复
weixin_43127781
weixin_43127781 用的absolute啊
接近 2 年之前 回复

我用的absolute啊

.chat_footer{ bottom:0; left:5%;right:5%;width:90%; position:absolute; } textarea{ width:90%; padding-left: 0.1rem; max-height: 6.15rem; border-top: 0px; border-left: 0px; border-right: 0px; resize: none; height: 1.5rem; width: 100%; line-height: 1.5rem; font-size: .75rem; background: #efeff4; border-radius: .2rem; border: none; outline: none; height: 25px; } .chat_footer.on{ border-top:1px solid #eee; }

我也是刚刚发现有这个问题,之前几天都还可以回滚到底部的,现在就不行了。怀疑是ios升级造成的

weixin_42423019
Root_030 是微信升级的问题 我IOS12 微信6.7.3测试OK 然后更新6.7.4 就出现这个问题了。 有解决方案吗?写fixed的话 空白不会出现,但是表单元素会错位。
接近 2 年之前 回复

是微信升级的问题 我IOS12 微信6.7.3测试OK 然后更新6.7.4 就出现这个问题了。 有解决方案吗?写fixed的话 空白不会出现,但是表单元素会错位。

ch19971124
ch19971124 是的,在Safari中打开就不会有这个问题了
一年多之前 回复
weixin_38630580
weixin_38630580 你完美的说出了 我想说的问题,在哪里能给微信提建议,让他赶紧修复这个问题
一年多之前 回复

已解决 通过指令的方式在输入框input 上 v-resetInput 。
可以参考代码
原理就是添加一个input1 在顶部,在目标input 失焦的时候 , 使在顶部的input1进行获取焦点在失去焦点。

var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1; //android终端
    Vue.directive('resetInput', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            if(isAndroid){
                return;
            }
            el.addEventListener('blur',function(){

                var input = document.getElementById('reset-input');

                if (!input) {
                    input = document.createElement('INPUT');
                    input.type = 'text';
                    input.style.height = '0px'
                    input.style.width = '0px'
                    input.style.position = 'absolute'
                    input.id = 'reset-input';
                    document.body.prepend(input);
                }

                input.focus();
                input.blur();
            })


        }
    })

代码如下:
$('input,textarea').on('blur',function(){
window.scroll(0,0);
});
$('select').on('change',function(){
window.scroll(0,0);
});
原理就是弹起键盘的时候,window.scrollY会从0变到键盘的高度(例如:200),当输入框焦点失去后让scrollY回到0就好了。

weixin_42841524
weixin_42841524 没找到在哪里点赞,我也完美解决了哈哈哈
大约一年之前 回复
weixin_39488367
weixin_39488367 使用这个方法有效,点赞
一年多之前 回复
qq_40061469
qq_40061469 点赞,点赞,这个最有用
一年多之前 回复
yuzong970504
yuzong970504 太感谢了 特意登录账号给您点赞
一年多之前 回复
u013251507
lixiaocan_2013 大赞问题解决了
一年多之前 回复
weixin_43506976
三月初见 就你这个最有用
一年多之前 回复
youyoustray
youyoustray 赞!终于是解决了,之前试了很多种方式都无效
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问