遮挡输入框解决方法"/>
5、手机输入法遮挡输入框解决方法
- 一参考资料
- 二HTML
- 三CSS
- 四JS
一、参考资料
- RunJs:
二、HTML
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>keyboard</title><meta name="viewport"content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="full-screen" content="true"/><meta name="screen-orientation" content="portrait"/><meta name="x5-fullscreen" content="true"/><meta name="360-fullscreen" content="true"/><title>Title</title>
</head>
<body class="bodyer">
<div class="block"></div>
<div class="auto1"><input class="auto-keyboard" placeholder="keyboard 1"/>
</div>
<div class="auto2"><input id="mcode" class="auto-keyboard" placeholder="keyboard 2"/>
</div>
</body>
</html>三、CSS
.bodyer {position: relative;//关键padding: 0rem;margin: 0rem;background-color: #888888;transition: top 1s;-moz-transition: top 1s;-webkit-transition: top 1s;-o-transition: top 1s;
}.block {height: 80vh;background-color: #005000;
}.auto1 {width: 75%;height: 10rem;line-height: 10rem;margin: 0 auto;background-color: #0B2E45
}.auto2 {width: 75%;height: 10rem;line-height: 10rem;margin: 0 auto;background-color: #1d1d39
}.auto-keyboard {width: 100%;outline: none;font-size: 1.5rem;height: 2rem;border: none;
}四、JS
/*
1、通过对相对依赖定位的body进行top偏移。其中_target.clientHeight可以替换为个人认为合适的值。当然可以编码页面期定义为元素的属性，通过值获取来记性个人化偏移
2、但让也可以单独定位特定元素，监听获得焦点和失去焦点事件
*/
var _body = document.querySelector("body");
window.addEventListener("focusin", function () {var event = event || window.event;var _target = event.target;_body.style.top = (-_target.offsetTop + _body.scrollTop + _target.clientHeight) + "px";
});
window.addEventListener("focusout", function () {_body.style.top = "0px"
});若要改为点击某个输入框，页面上移的效果，则
var mcode = document.getElementById('mcode');
var _body = document.querySelector("body");
mcode.addEventListener("focusin", function () {var event = event || window.event;var _target = event.target;_body.style.top = (-_target.offsetTop + _body.scrollTop + _target.clientHeight) + "px";
});
mcode.addEventListener("focusout", function () {_body.style.top = "0px"
});更多推荐
5、手机输入法遮挡输入框解决方法
发布评论