接着上一篇的移动端软盘遮挡页面后有想到了一个更为简单的解决方案：
让页面长一点，或者用脱离文档流的定位，这样键盘弹出来时，输入框会自动上滑。
还有种解决方案：在没有定位的情况下，解决输入框被手机键盘挡住时，可以参考：
var loaclHeight = $("section").height(); //获取可视宽度
$("input,textarea").focus(function() {
var keyboardHeight = localHeight - $("section").height(); //获取键盘的高度
var keyboardY = localHeight - keyboardHeight;
var addBottom = (parseInt($(this).position().top) + parseInt($(this).height()));//文本域的底部
var offset = addBottom - keyboardY;//计算上滑的距离
$("section").scrollTop(offset); });
ok就这样了
还有个方法
通过 window.onresize 监听页面大小变化，然后通过 window.scrollTo 使页面滚动到所需位置
页面不存在滑动（通过overflow设为hidden的方式），所以在点击input标签输入信息时，在安卓机下键盘会遮挡页面底部内容，当点击键盘时，焦点所在的 input标签才会显示在视区里。在IOS不存在此问题（在软键盘弹出时，页面会自动顶上去），存在滑动的页面里也不存在该问题。
window.onresize = function () {
if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
setTimeout(function () {
var top = document.activeElement.getBoundingClientRect().top;
window.scrollTo(0,top);
}, 0);
}
}
三
$('input,textarea,selector').focusout(function () {
var target = this;
// 使用定时器是为了让输入框上滑时更加自然
setTimeout(function(){
// target.scrollIntoView(true);
target.scrollIntoViewIfNeeded(true); // 推荐使用
//target.scrollIntoViewIfNeeded(false); // 推荐使用
},100);
});
四
$('input,textarea,select').on('focus',function(){
window.scroll(0,500);
});
// 离焦
$('input,textarea,select').on('blur',function(){
window.scroll(0,0);
});
