平博88登录
  咨询电话:13583427864

平博88体育

点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )

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

输入框固定在页面底部,如图所示:

 input固定底部设计图.png

点击底部input输入框唤起软键盘时,软键盘挡住输入框。如图所示:

 点击input键盘挡住图.png

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

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

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

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

Element.scrollIntoView()语法:<code>element.scrollIntoView(); // Equivalent to element.scrollIntoView(true)element.scrollIntoView(alignToTop); // Boolean argumentselement.scrollIntoView(scrollIntoViewOptions); // Object argument</code>

参数:alignToTop(可选)<code>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, 该元素的底部将对齐的滚动的祖先的可见区域的底部。)</code>

点击input底部输入框,软键盘挡住输入框的解决办法是,点击输入框的时候给input绑定事件,使用 Element.scrollIntoView()方法使元素弹到祖元素可见区域的顶部。代码如下:<code>$("input").on("click", function() {var target = this;setTimeOut(function() {target.scrollIntoView(true);}, 100);})</code>