最近项目有个需求，我们使用的是PDA装置，它有扫描枪，可以让扫描出来的内容填写到html的input控件中。
但是有一个棘手问题，就是input控件只要获取焦点，就会弹出键盘。
这一点与android原生控件不同，原生控件EditText调用它的requestFocus()，只会聚焦，不会弹出键盘。而html的input控件，只要调用它的focus()方法，就会弹出键盘。
项目的需求，希望刚开始时，只是将焦点聚集在input控件上，可以通过扫描枪输入，然后点击input控件时，还能弹出键盘进行修改。
这个问题解决核心就是 input控件聚焦的时候，不弹出键盘，当点击的时候，才弹出键盘。
尝试了很多方法，最后发现了readOnly属性一个诡异作用。当调用 input控件的focus()方法时，如果readOnly属性为true，那么不会弹出键盘，但是焦点已经在 input控件上了。这个时候，再将readOnly属性设置为false，那么这个时候键盘不会弹出，但是可以扫描枪输入了。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body style="padding: 0 20px">
<div>
<div style="height: 200px; background-color: #f00"></div>
<div>
<input id="scan1" placeholder="scan1"
style="margin-top: 10px;margin-bottom: 10px; height: 30px; width: 300px"
onfocus="onFocus()"
onkeypress="onKeyPress('scan2')"
onblur="onBlur()"
readOnly="true"/>
</div>
<div style="height: 200px; background-color: #0f0"></div>
<div>
<input id="scan2" placeholder="scan2"
style="margin-top: 10px;margin-bottom: 10px; height: 30px; width: 300px"
onfocus="onFocus()"
onkeypress="onKeyPress('scan3')"
onblur="onBlur()"
readOnly="true"/>
</div>
<div>
<input id="scan3" placeholder="scan3"
style="margin-top: 10px;margin-bottom: 10px; height: 30px; width: 300px"
onfocus="onFocus()"
onkeypress="onKeyPress('scan4')"
onblur="onBlur()"
readOnly="true"/>
</div>
<!--<div>-->
<!--<input id="input3" placeholder="input3"-->
<!--onkeypress="onKeyPress('scan4')"-->
<!--style="margin-top: 10px;margin-bottom: 10px; height: 30px; width: 300px"/>-->
<!--</div>-->
<div style="height: 200px; background-color: #00f"></div>
<div>
<input id="scan4" placeholder="scan4"
onfocus="onFocus()"
onkeypress="onKeyPress('scan1')"
onblur="onBlur()"
style="margin-top: 10px;margin-bottom: 10px; height: 30px; width: 300px"
readOnly="true"/>
</div>
<div><button value="点击" onclick="onClick1()" style="width: 100px; height: 100px;">点击</button></div>
</div>
<script type="text/javascript">
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
}
</script>
</body>
</html>
网友评论