移动端解决input被输入法挡住的问题

web前端开发百度资源
前端开发百度地图标注
百度事业部前端开发
前端开发 百度网盘

有过移动端web开发经验的人应该都会遇到这个问题,一个input在页面最底部或者偏下的位置,输入时由于输入法的弹出,在部分浏览器下由于不会自动计算window的高度,导致input被输入法挡住。
本文的解决方式是利用scrollTop来解决,在input获取焦点后,动态地设置body的高度并设置scrollTop到指定位置,这样可以保证input会滚动到输入法上方,失去焦点后再恢复原来的位置。
有两种情况:
1、input在页面最底部,后面没有其他元素,这种情况我们可以获取窗口的高度减去input的高度再减去一些空余高度,可以得到应该滚动的高度,var scrollHeight = $(window).height() – $(‘input’).height() – 40,这种情况下这么计算很合适,没什么问题。
2、然而有时候input不是在最底部,之后还有其他元素,如果按照上一种方式,当你滚动到input在屏幕中间或者上部的时候,由于滚动距离还是上一种方式获取的,这个时候滚动距离会大于应该滚动的距离,导致input直接到页面上方被隐藏了。
这个时候我们换种思路,只要想办法获取input到窗口的上边框的距离即可,其他代码都一样,那么可以这么写,var scrollHeight = $(‘input’).offset().top – $body.scrollTop() – 40,即input距离页面顶部的高度减body滚动的高度获得input距离窗口上方的高度。

完整代码(1) 在线预览:https://tgxhx.github.io/input/input.html
html 代码

<div style=”height: 1000px;”></div>
<input type=”text” style=”width: 100%;height: 40px; ” />
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
<script>
    var scrollHeight, //应该滚动的距离
        $body = $(‘body’)
    $(‘input’)
        .on(‘focus’, function() {
            //input距离页面顶部的高度减body滚动的高度获得input距离窗口上方的高度,40表示距离顶部留点空隙
            scrollHeight = $(‘input’).offset().top – $body.scrollTop() – 40
            console.log(scrollHeight)
            //先修改body的高度,在滚动到对应的位置
            $body
                .height($body.height() + scrollHeight)
                .animate({ scrollTop: $body.scrollTop() + scrollHeight }, 300)
        })
        .on(‘blur’, function() {
            //input失去焦点后恢复到原来的位置
            $body.animate(
                {
                    height: $body.height() – scrollHeight,
                    scrollTop: $body.scrollTop() – scrollHeight,
                },
                300,
            )
        })
</script>

完整代码(2)在线预览:https://tgxhx.github.io/input/input2.html
html 代码

<div style=”height: 1000px;”></div>
<input type=”text” style=”width: 100%;height: 40px; ” />
<p style=”height:400px;”>1</p>
<p style=”height:400px;”>1</p>
<p style=”height:400px;”>1</p>
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
<script>
    var scrollHeight, //应该滚动的距离
        $body = $(‘body’)
    $(‘input’)
        .on(‘focus’, function() {
            //input距离页面顶部的高度减body滚动的高度获得input距离窗口上方的高度,40表示距离顶部留点空隙
            scrollHeight = $(‘input’).offset().top – $body.scrollTop() – 40
            console.log(scrollHeight)
            //先修改body的高度,在滚动到对应的位置
            $body
                .height($body.height() + scrollHeight)
                .animate({ scrollTop: $body.scrollTop() + scrollHeight }, 300)
        })
        .on(‘blur’, function() {
            //input失去焦点后恢复到原来的位置
            $body.animate(
                {
                    height: $body.height() – scrollHeight,
                    scrollTop: $body.scrollTop() – scrollHeight,
                },
                300,
            )
        })
</script>
前端开发百度云盘
前端开发共享百度云
百度贴吧 前端开发 待遇
前端开发资源 百度云
web前端开发百度贴吧
前端开发百度贴吧
前端百度地图开发
慕课网web前端开发百度云
web前端开发 百度百科
前端百度地图api开发
前端开发百度知道
web前端开发百度传课
» 本文来自:前端开发者 » 《移动端解决input被输入法挡住的问题》
» 本文链接地址:https://www.rokub.com/6763.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!