博客

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

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

这一点与android原生控件不同，原生控件EditText调用它的requestFocus()，只会聚焦，不会弹出键盘。而html的input控件，只要调用它的focus()方法，就会弹出键盘。

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

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

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

示例:

Test

window.addEventListener(‘load’, function () {

document.getElementById(“scan1”).focus()

})

function onKeyPress(id) {

var keyCode = event.which || event.keyCode

if (keyCode == 13) {

document.getElementById(id).focus()

}

}

function onFocus () {

var target = event.target

setTimeout(function () {

target.readOnly = false

},0)

}

function onBlur() {

event.target.readOnly = true

}