1.之前做微信公眾號(hào)時(shí)發(fā)現(xiàn)每次調(diào)用鍵盤輸入的時(shí)候輸入框就被蓋著轻纪，讓人有點(diǎn)煩晕城，于是研究了一番，有了點(diǎn)下面的收獲斑鸦，解決了鍵盤蓋著輸入框的問題愕贡，下面我的這些都是在微信公眾號(hào)測(cè)試的，手機(jī)瀏覽器也可以巷屿，但是可能需要再修改一些數(shù)據(jù)颂鸿，先上效果圖，再上代碼：
①：上面的效果圖隨意擺放的input輸入框喚起鍵盤的對(duì)齊問題攒庵，下面上代碼：
<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() {//如果此處增加一個(gè)alert彈窗嘴纺，IOS上面就可以自動(dòng)對(duì)齊，如果沒有則不會(huì)自動(dòng)對(duì)齊加個(gè)延遲的定時(shí)器盡然也可以達(dá)到同樣的效果浓冒，alert和延遲定時(shí)器有什么關(guān)系嗎?
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; ? ?//獲取焦點(diǎn)時(shí)記錄一下input的當(dāng)前位置栽渴，以便失去焦點(diǎn)的時(shí)候重新回到原來的位置；或者$(document).scrollTop()也可以setTimeout(function() { ? ?//如果不用定時(shí)器和alert之類的稳懒，不會(huì)執(zhí)行闲擦，
if(isiOS){ ? ? ? ? ? //這里要判斷IOS和安卓慢味，因?yàn)樗麄儓?zhí)行的是不同的代碼
document.body.scrollTop= ($(".input1").offset().top-98); ? ?//這個(gè)在IOS上面是好的，$(".class").offset().top獲取頁面到頂部的距離墅冷，后面減的是input元素框的高度纯路，}
if(isAndroid){
document.body.scrollTop= ($(".input1").offset().top-180); ?//這個(gè)在安卓上是好的，如果input輸入框在頁面底部就不用管沒事寞忿，如果input輸入框在頁面中就需要上面的代碼驰唬，才可以，$(".class").offset().top獲取頁面到頂部的距離腔彰，?后面減的是input元素框的高度叫编，但是安卓的關(guān)閉鍵盤時(shí)輸入框沒有失去焦點(diǎn)，導(dǎo)致無法回到原來的位置霹抛，只能點(diǎn)擊其他地方才會(huì)突然回到原來的位置搓逾。下面的失去焦點(diǎn)回到原來位置的代碼不知道還有沒有必要？
}
},40);
}).blur(function() {
setTimeout(function() {
document.body.scrollTop=scrollTop;
},40);
})
});
②：上面的代碼是隨意放置的input的對(duì)齊問題杯拐，下面的代碼是標(biāo)準(zhǔn)的header霞篡，body，footer三段式的布局的對(duì)齊代碼：界面結(jié)構(gòu)見下圖：
上面的就是界面的結(jié)構(gòu)端逼，下面先上效果圖寇损，再展示代碼：
下面上代碼：
<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;}
/*聊天窗口_內(nèi)容*/
.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">發(fā)送</div></div>
下面是js代碼，依賴于jQuery：
//? ? 解決第三方軟鍵盤喚起時(shí)底部input輸入框被遮擋問題
var bfscrolltop=document.body.scrollTop; ? //獲取軟鍵盤喚起前瀏覽器滾動(dòng)部分的高度
$("input.inputframe").focus(function(){ ? ? //在這里‘input.inputframe’是我的底部輸入欄的輸入框裳食，當(dāng)它獲取焦點(diǎn)時(shí)觸發(fā)事件
interval=setInterval(function(){ ?//設(shè)置一個(gè)計(jì)時(shí)器，時(shí)間設(shè)置與軟鍵盤彈出所需時(shí)間相近
document.body.scrollTop=document.body.scrollHeight; ? ?//獲取焦點(diǎn)后將瀏覽器內(nèi)所有內(nèi)容高度賦給瀏覽器滾動(dòng)部分高度
},100)
}).blur(function(){ ? ? //設(shè)定輸入框失去焦點(diǎn)時(shí)的事件
clearInterval(interval);//清除計(jì)時(shí)器
document.body.scrollTop=bfscrolltop;//將軟鍵盤喚起前的瀏覽器滾動(dòng)部分高度重新賦給改變后的高度
});
