HTML5 input焦点键盘弹出问题

html-css020

HTML5 input焦点键盘弹出问题,第1张

最近项目有个需求,我们使用的是PDA装置,它有扫描枪,可以让扫描出来的内容填写到html的input控件中。

但是有一个棘手问题,就是input控件只要获取焦点,就会弹出键盘。

项目的需求,希望刚开始时,只是将焦点聚集在input控件上,可以通过扫描枪输入,然后点击input控件时,还能弹出键盘进行修改。

这个问题解决核心就是 input控件聚焦的时候,不弹出键盘,当点击的时候,才弹出键盘。

尝试了很多方法,最后发现了readOnly属性一个诡异作用。当调用 input控件的focus()方法时,如果readOnly属性为true,那么不会弹出键盘,但是焦点已经在 input控件上了。这个时候,再将readOnly属性设置为false,那么这个时候键盘不会弹出,但是可以扫描枪输入了。

示例:

移动web聊天页面,输入框在底部的时候,点击输入,弹起软键盘,iOS在将页面推上的时候会回弹一下,导致键盘刚好遮挡到输入框。

初次触发输入框的focus的时候,iOS 键盘默认是以英文键盘高度推上页面,但一般我们的默认输入是中文,会导致软键盘的高度变化,中文输入键盘高度高于英文,所以导致了遮挡。

Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。 此方法是标准的 Element.scrollIntoView() 方法的专有变体。

当键盘在切换中英输入法时,键盘高度变化仍然会引起键盘遮挡

监听输入框的 focus 、 blur 事件,当聚焦时,循环调用 input.scrollIntoViewIfNeeded 方法。

当监听到 blur 时,停止循环。

解决方法

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

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

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

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

5、代码如下:

6、再次测试,效果如下:

7、相比于input被挡住,突兀地出现在页面中间更加可以令人接受,但是多次测试,仍然存在问题:当切换输入法的时候,input框的位置会往下移动,被键盘挡住一部分,而且出现的概率比较高(中英文切换),效果如下:

8、当软键盘被唤起是,使用 scrollTop() 方法使input元素滚动到指定的位置,但是滚动的具体数值需要调试才能给出,所以这里就不再演示了。