weixin_43127781
weixin_43127781
采纳率0%
2018-11-29 00:59 阅读 15.2k

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条回答 默认 最新

  • weixin_43345697 weixin_43345697 2018-12-12 05:11

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

    点赞 12 评论 复制链接分享
  • weixin_42423019 Root_030 2018-11-30 08:17

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

    点赞 1 评论 复制链接分享
  • yan_yuanfeng yan_yuanfeng 2018-12-07 05:55

    已解决 通过指令的方式在输入框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();
                })
    
    
            }
        })
    
    点赞 1 评论 复制链接分享
  • hss875881611 hss875881611 2018-11-29 01:05

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

    点赞 评论 复制链接分享
  • weixin_43127781 weixin_43127781 2018-11-29 01:21

    我用的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; }

    点赞 评论 复制链接分享
  • lun_hero lun_hero 2018-11-29 15:02

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

    点赞 评论 复制链接分享

相关推荐