在 HTML/CSS/JS 中，当输入字段获得焦点时，我希望能够从屏幕上隐藏移动设备上的默认键盘。
情况是这样的:我在带有内置二维扫描仪的手持设备(Android 5+，运行基于 Chromium 的东西)上有一个网络解决方案 - 用于读取条形码。
默认情况下，某些字段应通过扫描条形码获取输入，我非常想隐藏屏幕上显示的默认键盘。然后，如有必要，我希望有一些选项可以实际显示默认键盘，例如通过页面上的某些按钮或选择。
我已经阅读了针对类似问题的各种建议(主要是将字段设置为只读，但也有关于在获得焦点后立即模糊字段的建议)但是这些都不起作用，因为扫描仪不会在字段中输入任何内容 -它需要该领域有重点。
最佳答案
感谢您的回复。由于共识是这是不可能的，所以我做了一个解决方法，我将在这里发布:
基本原理是模糊输入字段，然后捕获按键以将它们添加到输入字段中。
在这种情况下，我使用的是带全数字条形码的条形码扫描器，所以这就是它的工作原理，但如果其他人应该感兴趣，那么适应其他情况应该是微不足道的:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$( document ).ready( function () {
// _input_fields and _scan_fields are jQuery objects with the relevant elements
let _input_fields = $("input[type=number], input[type=text], input:not([type]), select");
let _scan_fields = $("input[type=number].scanner");
// _ignore is set to true when a scannable field actually _should_ get focus
var _ignore = false;
// onfocus() for relevant input fields on page
_input_fields.focus(function(){
// only do something if scannable fields shouldn't actually get focus
if (!_ignore) {
// outer is the current input field that is getting focus
let outer = this;
// found is set to true if the current input field is scannable
let found = false;
// loop through all scannable fields to see if the current input field is one of them
_scan_fields.each(function(index) {
// inner is one of the scannable fields, possibly the current input field
let inner = this;
// _field stores the current input field _if_ it is scannable
var _field;
// only check (and potentially reset key capture) if we have not found the current
// input field to be one of the scannable fields (yet)
if (!found) {
// check if the current input field "outer" is the currently examined
// scannable field "inner"
if (inner == outer) {
// the current input field is one of the scannable fields
// immediately remove focus to disable mobile keyboard
inner.blur();
// remember which input field we have found and disable further checks
_field = inner;
found = true;
// remove any existing keycapture (might destroy existing functionality!!!)
$(document).off("keypress");
// capture keypresses and add numbers to the input field
$(document).keypress(function(event){
var _field = inner;
let keynum = event.which;
if (keynum == 13) { // enter
// ignore or submit?
} else if ((keynum < 48) || (keynum > 57)) {
// not-a-number, ignore in this case
} else {
// a number, add to field value
$(_field).val($(_field).val() + String.fromCharCode(event.which));
}
});
} else {
// this is a regular field
// remove any existing keycapture (might destroy existing functionality!!!)
$(document).off("keypress");
}
}
});
}
});
// add a button after each scannable input field
$("input[type=number].scanner").after(function(){
return "<button class='descanner'>123</button>";
});
// if those buttons are pressed, the input field before them actually gets focus
// overriding the new behaviour
$("button.descanner").click(function(event){
// these buttons do not submit the form
event.preventDefault();
// remove any existing keycapture (might destroy existing functionality!!!)
$(document).off("keypress");
// set focus for the input field but make sure we don't catch this above
// also, clear content of input field
_ignore = true;
$(this).prev("input[type=number].scanner").val("").focus();
_ignore = false;
});
});
</script>
</head>
<body>
<form>
<input type="number" name="field1" class="" />
<input type="text" name="field2" class="" />
<input name="field3" class="" />
<select name="field4" class="">
<option value="bac">abc</option>
</select>
<input type="number" name="field5" class="scanner" />
<input type="number" name="field6" class="" />
<input type="number" name="field7" class="scanner" />
</form>
</body>
</html>
该表单有 7 个字段，其中 2 个具有所需的功能。为了启用对这些字段的手动编辑，在这 2 个字段中的每一个旁边都添加了一个按钮。
这已经在 Chrome 55 和 Zebra TC 51 上进行了测试，Webview 已更新到 Chromium 55。
关于javascript - 隐藏移动默认键盘但保持输入字段处于事件状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41979445/