html文本框小键盘,在js中如何解决软键盘遮挡输入框

下面我就为大家推荐一篇js解决软键盘遮挡输入框的问题分享，具有很好的参考价值，希望对大家有所帮助。

经验须知

弹出软键盘时：

ios端$(‘body').scrollTop()会改变

android端$(window).height()会改变

拉起键盘不是一瞬间，而是有一个缓动过程

问题重现

ios端，经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法，如：百度输入法)，如图：

问题解决

我们只需要在输入框聚焦之后，开启一个定时器，执行$(‘body').scrollTop(1000000)，这样由于整个body滚动到了最下面，输入框自然就看见了，具体请查看以下示例

示例源码

demo

* {

margin: 0;

padding: 0;

}

body, html {

width: 100%;

height: 100%;

}

.bottom {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

font-size: 0;

}

input {

font-size: 14px;

box-sizing: border-box;

width: 50%;

height: 50px;

line-height: 50px;

}

$(function() {

// 解决输入法遮挡

var timer = null;

$('.bInput').on('focus', function() {

clearInterval(timer);

var index = 0;

timer = setInterval(function() {

if(index>5) {

$('body').scrollTop(1000000);

clearInterval(timer);

}

index++;

}, 50)

})

});

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：