HTML5 input焦点键盘弹出问题

html-css023

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

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

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

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

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

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

示例:

焦点的意思就是被选中,和文本框相似,<button type="button" autofocus="autofocus">点击这里</button>当页面加载完成之后,这个按钮会被选中。你可以用火狐试试。

不能。

这个属性在不同浏览器下的显示是不一样的。

在 Firefox、Chrome、Microsoft Edge 或其他使用以上三种内核的浏览器中,输入框获得焦点时,placeholder 没有变化,只有当输入框中输入了内容时,placeholder 才消失(这也是主流做法);而在 Safari 和 IE9+ 或其他使用以上两种内核的浏览器中,当输入框获得焦点时,placeholder 便会消失。