文章详细
解决 ios input fixed置底 获取焦点或切换输入法时被法挡住的BUG
 2018/7/5 11:53:20 评论:0人 阅读次数:9187

一、概述:

项目中有一个置底发布评论的效果,安卓没有发现问题,但是IOS出现了被输入法挡住的问题。搜索了下这个BUG,很多人都有在问这个问题。

解决 ios input fixed置底 获取焦点或切换输入法时被法挡住的BUG

二、解决思路:

有去尝试了一些测试,但有些是只能在弹出时滚动到底部,切换输入法还是有问题。所以我对此方法做了一个调整,IOS中需要点击才能获取焦点,接着我就对input点击事件着手。

1、点击input时科开启定时器自动滚动到底部,防止切换输入法导致被挡住。

2、input失去焦点时清除定时器。

三、实例源代码:(测试地址:http://www.86y.org/demo/input%20fixed/)

<div class="replay_com">
    <div><input type="text" placeholder="说点什么吧" class="c333 txt" id="replay_txt"><a href="javascript:;" class="sendsbt">发送</a></div>
</div>
<script>
    $(function () {
        //点击输入框开启定位器
        var scrollint = null;
        $("#replay_txt").click(function () {
            scrollint = setInterval(function () { document.body.scrollTop = document.body.scrollHeight; }, 500);//滚动到底部
        });
        //失去焦点清除定时器
        $("#replay_txt").blur(function () {
            clearInterval(scrollint);
        });
    });
</script>

 

结语:

这个BUG基本上就这样解决了,如果还有其它问题欢迎讨论。

经过多次实践发现,发现有些ios手机会不停的闪,因为定时器原因,所以建议所有前端的小伙伴们告诉你们的设计人员【放在底部的input会有这个bug,建议放到50%位置以上】

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=861【解决 ios input fixed置底 获取焦点或切换输入法时被法挡住的BUG】幸凡学习网
0
 
相关文章
推荐文章
Created By Charry-May 3,2010
粤ICP备10093478号-1
顶部