2018-03-02

测试移动端页面的时候，偶然发现点击底部input输入框时，弹出的虚拟键盘偶尔会挡住input输入框。

输入框固定在页面底部，如图所示：

测试过多台真机发现安卓的手机都不会出现这个问题，个别的iOS手机有问题。而且同一型号的苹果有的有问题有的没有问题。经过多方的归纳、总结惊奇的发现：会出现这个bug的苹果手机，使用的都是苹果第三方输入法，而使用苹果自带的输入法则没有这个bug。

出现这个bug的时候输入字符的时候，input输入框又会滚动上去。沿着这个思路往下想，我想到input获取焦点失败、滚动浏览器窗口或容器元素的问题。

解决这个问题的思路是，点击input输入框的时候，让其input滚动到当前div的顶部。于是我想到了Element.scrollIntoView() 方法。

DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域，各浏览器实现了相应的方法，可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在，所以它能在所有元素上使用。

Element.scrollIntoView()语法：

element.scrollIntoView(); // Equivalent to element.scrollIntoView(true)

element.scrollIntoView(alignToTop); // Boolean arguments

element.scrollIntoView(scrollIntoViewOptions); // Object argument

参数：alignToTop（可选）

Is a Boolean value:

If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. This is the default value.（ 如果alignToTop为true，该元素的顶部将对齐的滚动的祖先的可见区域的顶部。这是默认值。）

If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.（如果alignToTop false， 该元素的底部将对齐的滚动的祖先的可见区域的底部。）

点击input底部输入框，软键盘挡住输入框的解决办法是，点击输入框的时候给input绑定事件，使用 Element.scrollIntoView()方法使元素弹到祖元素可见区域的顶部。代码如下：

jQuery的写法：

$("input").on("click", function() {

var target = this;

setTimeOut(function() {

target.scrollIntoView(true);

}, 100);

})

vue的写法：

foot_input(){

  let _this =document.getElementById("reply");

setTimeout(function() {

_this.scrollIntoView(true);

},100);

},然后在input输入框中绑定这个函数