移动端输入键盘被遮盖的处理方法

来源：互联网发布：sev18软件下载编辑：程序博客网时间：2024/06/06 08:44

<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;
}
</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 = '9999px';
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>

阅读全文

0 0