Question

在HTML / CSS / JS中，当输入字段获得焦点时，我希望能够在屏幕上隐藏默认键盘。

情况是这样的：我在手持设备（Android 5+，运行基于Chromium的东西）上有一个网络解决方案，内置2D扫描仪 - 用于读取条形码。

默认情况下，某些字段应该从扫描条形码中获取输入，我非常希望隐藏屏幕上显示的默认键盘。然后，如果有必要，我想有一些实际显示默认键盘的选项，例如通过页面上的某个按钮或选项。

我已经阅读了类似问题的各种建议（主要是将字段设为只读，但也是关于在获得焦点后立即模糊字段的那些）但这些不起作用，因为扫描仪没有输入任何内容 - 它需要该领域有重点。

Answer 1

感谢您的回复。由于大家一致认为这是不可能的，所以我做了一个我在这里发布的解决方法：

基本原则是模糊输入字段，然后捕获按键，无论如何都要将它们添加到输入字段。

在这种情况下，我使用带有全数字条形码的条形码扫描器，这样就可以使用，但如果其他人应该感兴趣，那么适应其他情况应该是微不足道的：

<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个字段具有所需的功能。要启用这些字段的手动编辑，将在这两个字段的每一个旁边添加一个按钮。

已经在Chrome 55和Zebra TC 51上测试了这一点，并将Webview更新为Chromium 55.

Answer 2

在上方定义一个Input元素并附加CSS属性，该属性将隐藏软键盘以弹出。
设置焦点以准备扫描仪在文本字段中的输入。

最后一步关闭只读模式以输入数据。

yourInputVal = document.getElementById('myInputElement');
yourInputVal.readOnly = true;
yourInputVal.focus();
setTimeout(function(){
  document.getElementById('myInputElement').readOnly = false;
},

javascript - 隐藏移动默认键盘但保持输入字段处于活动状态

2 个答案: