1.之前做微信公众号时发现每次调用键盘输入的时候输入框就被盖着，让人有点烦，于是研究了一番，有了点下面的收获，解决了键盘盖着输入框的问题，下面我的这些都是在微信公众号测试的，手机浏览器也可以，但是可能需要再修改一些数据，先上效果图，再上代码：
IOS效果图
安卓效果图
①：上面的效果图随意摆放的input输入框唤起键盘的对齐问题，下面上代码：
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
<style>
*{margin:0;padding:0;}
html,body{width:100%}
.box{width:100%}
.box ul li{width:100%;height:80px;line-height:80px;margin-bottom:5px;background:lightblue;text-align:center;}
.inputBox{width:100%;height:60px;line-height:60px;background:lightblue;text-align:center;}
.input1{width:100%;height:80px;line-height:80px;font-size:20px;border:none;background:gainsboro;}
.input2{width:100%;height:60px;line-height:60px;font-size:20px;border:none;background:gainsboro;}
</style>
<body>
<div class="box">
<ul>
<li>0</li><li>1</li><li>2</li><li>3</li><li class='li'><input type="text" placeholder="this is input1" class="input1"></li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
<ul>
<div class="inputBox"><input type="text" placeholder="this is input2" class="input2"></div>
</div>
<script>
$(document).ready(function() {//如果此处增加一个alert弹窗，IOS上面就可以自动对齐，如果没有则不会自动对齐加个延迟的定时器尽然也可以达到同样的效果，alert和延迟定时器有什么关系吗?
var u=navigator.userAgent;
var isAndroid=u.indexOf('Android') > -1||u.indexOf('Adr') > -1;//android终端
var isiOS= !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//ios终端
var scrollTop;
$(".input1").focus(function() {
scrollTop=document.body.scrollTop; //获取焦点时记录一下input的当前位置，以便失去焦点的时候重新回到原来的位置；或者$(document).scrollTop()也可以setTimeout(function() { //如果不用定时器和alert之类的，不会执行，
if(isiOS){ //这里要判断IOS和安卓，因为他们执行的是不同的代码
document.body.scrollTop= ($(".input1").offset().top-98); //这个在IOS上面是好的，$(".class").offset().top获取页面到顶部的距离，后面减的是input元素框的高度，}
if(isAndroid){
document.body.scrollTop= ($(".input1").offset().top-180); //这个在安卓上是好的，如果input输入框在页面底部就不用管没事，如果input输入框在页面中就需要上面的代码，才可以，$(".class").offset().top获取页面到顶部的距离， 后面减的是input元素框的高度，但是安卓的关闭键盘时输入框没有失去焦点，导致无法回到原来的位置，只能点击其他地方才会突然回到原来的位置。下面的失去焦点回到原来位置的代码不知道还有没有必要？
}
},40);
}).blur(function() {
setTimeout(function() {
document.body.scrollTop=scrollTop;
},40);
})
});
②：上面的代码是随意放置的input的对齐问题，下面的代码是标准的header，body，footer三段式的布局的对齐代码：界面结构见下图：
三段式布局结构
上面的就是界面的结构，下面先上效果图，再展示代码：
IOS效果图
安卓效果图
下面上代码：
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
*{margin:0;padding:0;}
html,body{width:100%} /*聊天窗口_顶部*/
.nav{display:block;position:absolute;top:0;width:100%;height:50px;line-height:50px;font-size:2rem;background-color:gray;z-index:99;color:white;text-align:center;}
/*聊天窗口_内容*/
.content{display:block;position:absolute;top:50px;bottom:50px;width:100%;height:auto;background-color:#ebebeb;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
.content ul li{width:100%;height:80px;line-height:80px;text-align:center;font-size:20px;margin-bottom:5px;background:lightblue;}
/*聊天窗口_底部*/
#returnframe{display:block;position:absolute;bottom:0;width:100%;height:50px;background-color:#f4f4f4;border-top:1px solid#d8d8d8;z-index:99;}
.inputframe{width:70%;height:100%;float:left;border:none;box-sizing:border-box;}
.returnframe_button{width:30%;height:100%;float:left;text-align:center;line-height:50px;box-sizing:border-box;background:lavender;}
<div class="nav">this is top</div>
<div class="content"><ul><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li></ul></div>
<div id="returnframe"><input type="text" name="inputframe" class="inputframe"><div class="returnframe_button">发送</div></div>
下面是js代码，依赖于jQuery：
// 解决第三方软键盘唤起时底部input输入框被遮挡问题
var bfscrolltop=document.body.scrollTop; //获取软键盘唤起前浏览器滚动部分的高度
$("input.inputframe").focus(function(){ //在这里‘input.inputframe’是我的底部输入栏的输入框，当它获取焦点时触发事件
interval=setInterval(function(){ //设置一个计时器，时间设置与软键盘弹出所需时间相近
document.body.scrollTop=document.body.scrollHeight; //获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
},100)
}).blur(function(){ //设定输入框失去焦点时的事件
clearInterval(interval);//清除计时器
document.body.scrollTop=bfscrolltop;//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
});
网友评论