Question

我为我们的网站创建了一个webview（Android）。我把输入放在自动对焦中：

<input name="barcode" 
        type="search"
        placeholder="Scan Barcode"
        class="form-control"
        autocomplete="off"
        autofocus
        required>

当页面加载时，选择了输入但是Android的键盘没有打开=＆gt;完美

但是当我专注于此输入时，Android键盘会打开，我不希望它打开，因为此输入仅用于扫描条形码

所以我想＆＃34;模拟＆＃34;关闭模态（例如）而不是简单的焦点时自动对焦，该怎么做？

$('.modal').on('hidden.bs.modal', function (e) {
  $("input[name='barcode']").focus();
});

编辑：更多详情：

我们使用这些扫描网访问我们的Intranet站点：

https://www.jmprime.co.uk/product_info.php/android-barcode-scanner-with-gun-grip-rugged-handheld-ip67-device-with-1d-barcode-reader-p-238

在相关页面上只有一个输入，目标是输入输入而不打开Android键盘以扫描条形码（然后将它们发送到数据库）< / p>

Answer 1

从This answer开始，readonly似乎有效。我发现很难直接在输入上工作，所以我仍然会使用假输入的技巧。将timeout设置为1ms，就像魅力一样。（下面更新的小提琴）

<input id="barcode" name="barcode" type="hidden" placeholder="Scan Barcode" required>

<label for="barcode" class="your-cool-class-to-make-this-look-like-an-input" />

使用for属性，单击时，它将聚焦相关输入。

https://jsfiddle.net/ubdnvsk0/26/

Answer 2

试试这个：

我使用Bootstrap 4作为modal和jQuery。

我忘了为什么.focus()有时候没有执行，但我记得把它放进setTimeout()时间为0，这样就可以了。

以防您对代码感到困惑：() => {}类似于   function() {}，anonymous function / callback

箭头函数是一种更简洁的函数编写方法，介绍   在ES6。

箭头功能是匿名功能，这意味着你   无法命名。箭头函数不绑定到this，它们不会创建   他们自己的this，因此正在使用封闭的this。

阅读材料：'Arrow Functions - developer.mozilla.org'

$(document).ready(() => {
  $('#myModal').on('hidden.bs.modal', () => {

    setTimeout(() => {
      $("#barcode").focus();
    }, 0);
  })
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">

  <input id="barcode" name="barcode" type="search" placeholder="Scan Barcode" class="form-control" autocomplete="off" autofocus required readonly><br>

  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>

</div>

如何模拟自动对焦

2 个答案: