您的位置：首页 > 移动开发

H5移动端弹出键盘时遮挡输入框

2018-03-12 10:22 405 查看
在写移动端时，如果使用绝对定位Fixed将输入框（input或者textarea）,当手机的输入法为自带输入法时可能问题不大，但是当使用类似搜狗等输入法时，由于会高出自带输入法大约30个像素，就会造成输入框被遮盖一部分的现象，很尴尬。

下边简单说说简单的解决思路，当然还有复杂的（四种）。

延时一定时间重新定位输入框。

点击输入框时加长body元素高度到9999px（当然不一定非要这么高），页面滚动到空白区域，再生成输入框添加在当前一屏页面的最顶端。

借助元素的 scrollIntoViewIfNeeded() 方法。这个方法执行后如果当前元素在视口中不可见，则会滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中已经是可见的，这个方法什么也不做。

页面跳转或者显示隐藏（无疑是最简单的，但是可能不能满足产品的要求，或者有点low，但是网页版的微博就是如此）。

今天我们生产代码，不再是代码的搬运工。

下面是第一种方法

//点击评论框

var bfscrolltop = 0;//获取软键盘唤起前浏览器滚动部分的高度
$('input[type="text"],textarea').focus(function() {
//给个延迟
bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight}, 100
);
window.addEventListener('touchmove', fn, false);

}).blur(function(){
clearInterval(interval);
});
//如果你的页面中使用了iscorll插件，这时候你需要处理评论框的滑动事件————拒绝滑动
function fn(ev) {
var _target = ev.target || ev.srcElement;
if(_target.nodeName != 'TEXTAREA') {
$('.pinglun_footerr_text').blur();
}
};


下面是第二种方法

<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

body,
html {
padding: 5px;
}

.scrollDiv {
width: 100%;
height: 900px;
background: #ccc;
font-size: 24px;
padding-top: 40px;
text-align: center;
}

input {
-webkit-appearance: none;
width: 100%;
display: block;
margin: 10px auto;
border-radius: 0px;
font-size: 16px;
padding: 12px 10px;
box-sizing: border-box;
box-shadow: none;
border: 1px solid #666;

position: fixed;
left: 0;
bottom: 0;

}
</style>
</head>

<body style="">
<div class="main">
<div class="scrollDiv">滑到最下面</div>
<input type="text" placeholder="点击我" id="inp">
</div>
<script type="text/javascript">
var inp = document.querySelector('#inp');
var bodyHeight = document.body.offsetHeight;
inp.onclick = function(ev) {
document.querySelector('body').style.height = '99999px';
inp.style.position = 'static';
setTimeout(function() {
document.body.scrollTop = document.documentElement.scrollTop = inp.getBoundingClientRect().top + pageYOffset - 5;
}, 50);
window.addEventListener('touchmove', fn, false);
}

inp.onblur = function() {
document.querySelector('body').style.height = "auto"
document.querySelector('body').removeAttribute('style')
window.removeEventListener('touchmove', fn, false)
}
//触摸取消blur
function fn(ev) {
var _target = ev.target || ev.srcElement;
if(_target.nodeName != 'INPUT') {
inp.blur();
}
ev.preventDefault()
};
</script>
</body>

</html>


下面是第三种方法

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<style type="text/css">
input{
width: 100%;
height: 50px;
background-color: darkgreen;
position: fixed;
left: 0;
bottom: 0;
}
.lo{
width: 300px;
height: 50px;
background-color: darkcyan;
text-align: center;
line-height: 50px;
}
.xxx{
width: 50px;
height: 1000px;
background-color: darkgrey;
}
</style>
</head>

<body>
<div class="lo">点这里</div>
<div class="xxx"></div>
<input type="text" id="txt" />
<div id="dv"></div>
<script>
//          var timer, windowInnerHeight;
//
//          function eventCheck(e) {
//              if(e) { //blur,focus事件触发的
//
//                  $('#dv').html('android键盘' + (e.type == 'focus' ? '弹出' : '隐藏') + '--通过' + e.type + '事件');
//                  if(e.type == 'click') { //如果是点击事件启动计时器监控是否点击了键盘上的隐藏键盘按钮，没有点击这个按钮的事件可用，keydown中也获取不到keyCode值
//                      setTimeout(function() { //由于键盘弹出是有动画效果的，要获取完全弹出的窗口高度，使用了计时器
//                          windowInnerHeight = window.innerHeight; //获取弹出android软键盘后的窗口高度
//                          timer = setInterval(function() {
//                              eventCheck()
//                          }, 100);
//                      }, 500);
//                  } else clearInterval(timer);
//              } else { //计时器执行的，需要判断窗口可视高度，如果改变说明android键盘隐藏了
//                  if(window.innerHeight > windowInnerHeight) {
//                      clearInterval(timer);
//                      $('#dv').html('android键盘隐藏--通过点击键盘隐藏按钮');
//                  }
//              }
//          }
//          $('#txt').click(eventCheck).blur(eventCheck);

$(".lo").click(function(){
$("#txt").css({position:"relative"})
$("#txt").focus();
/*setTimeout(function(){
target.scrollIntoViewIfNeeded();
//target.scrollIntoView(true);
console.log('scrollIntoViewIfNeeded');
},00);*/
})

$('input[type="text"],textarea').on('focus', function () {

var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
//target.scrollIntoView(true);
console.log('scrollIntoViewIfNeeded');
},200);
});

/*
var clientHeight = document.body.clientHeight;
var _focusElem = null; //输入框焦点
//利用捕获事件监听输入框等focus动作
document.body.addEventListener("focus", function(e) {
_focusElem = e.target || e.srcElement;
console.log(111)
}, true);
//因为存在软键盘显示而屏幕大小还没被改变，所以以窗体（屏幕显示）大小改变为准
window.addEventListener("resize", function() {
alert(222)
setTimeout(function(){
_focusElem.scrollIntoViewIfNeeded();
//console.log('scrollIntoViewIfNeeded');
},200);
//焦点元素滚动到可视范围的底部(false为底部)
// _focusElem.scrollIntoView(true);

});*/

//          setTimeout(function(){
//              target.scrollIntoViewIfNeeded();
//              console.log('scrollIntoViewIfNeeded');
//          },200);
//

</script>

</body>

</html>


下面是第四种方法

//太简单我就不写了

//一顿操作


原文链接：http://blog.csdn.net/qq_37231097/article/details/76614702
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  H5移动端弹出框
相关文章推荐
新的分享
章节导航