苹果自带输入法

html苹果的输⼊框点击不好点,点击底部input输⼊框，弹出的

软键盘挡住input（苹果。。。

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

输⼊框固定在页⾯底部，如图所⽰：

input固定底部设计图.png

点击底部input输⼊框唤起软键盘时，软键盘挡住输⼊框。如图所⽰：

点击input键盘挡住图.png

测试过多台真机发现安卓的⼿机都不会出现这个问题，个别的iOS⼿机有问题。⽽且同⼀型号的苹果有的有问题有的没有问题。经过多⽅的

归纳、总结惊奇的发现：会出现这个bug的苹果⼿机，使⽤的都是苹果第三⽅输⼊法，⽽使⽤苹果⾃带的输⼊法则没有这个bug。

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

器元素的问题。

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

DOM规范中并没有规定各浏览器需要实现怎样的滚动页⾯区域，各浏览器实现了相应的⽅法，可以使⽤不同的⽅式控制页⾯区域的滚动。

这些⽅法作为HTMLElement类型的扩展存在，所以它能在所有元素上使⽤。

IntoView()语法：

IntoView();//IntoView(true)

IntoView(alignToTop);//Booleanarguments

IntoView(scrollIntoViewOptions);//Objectargument

参数：alignToTop(可选)

IsaBooleanvalue:

Iftrue,thetopoftheelemthedefaultvalue.

(如果alignToTop为true，该元素的顶部将对齐的滚动的祖先的可见区域的顶部。这是默认值。)

Iffal,thebottomoftheelementwillbealignedtothebottomofthevisibleareaofthescrollableancestor.(如果alignToTop

fal，该元素的底部将对齐的滚动的祖先的可见区域的底部。)

点击input底部输⼊框，软键盘挡住输⼊框的解决办法是，点击输⼊框的时候给input绑定事件，使⽤IntoView()⽅法使元素

弹到祖元素可见区域的顶部。代码如下：

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

vartarget=this;

tTimeOut(function(){

IntoView(true);

},100);

})

作者：⼩宇⼦李