解决html中手机键盘遮挡input输入框

---

多读多写多记录，多学多练多思考。 ---------- Banana.Banuit(香柚帮)

---

解决方法：

scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。

alignWithTop 若为 true，或者什么都不传，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐；

alignWithTop 若为 false，调用元素会尽可能全部出现在视口中，可能的话，调用元素的底部会与视口顶部平齐，不过顶部不一定平齐。

支持的浏览器：IE、Chrome、Firefox、Safari和Opera。

该方法是唯一一个所有浏览器都支持的方法，类似还有如下方法，但是只有在Chrome和Safari有效：

scrollIntoViewIfNeeded(alignCenter)

scrollByLines(LineCount)

代码如下：

//input输入框简例
<input type="text" name="username" onclick="topScrollInput(this);"/>
<input type="password" name="password" onclick="topScrollInput(this);"/>

//js简例
function topScrollInput(obj) {
    var target = obj;
    //使用定时器让输入框上滑时更加自然
    setTimeout(function(){
        target.scrollIntoView(true);
    },100);
}