admin管理员组文章数量:1632416
一、参考资料 RunJs:http://runjs/code/pigebxdj
二、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"
- });
版权声明:本文标题:手机输入法遮挡输入框解决方法 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729127591a1187499.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论