如何模拟自动对焦

Question

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

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

加载页面时选择了输入但Android的键盘没有打开=>完美

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

所以我想“模拟”关闭模态时的自动对焦（例如）而不是简单的对焦，怎么办？

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

编辑：更多细节：

我们使用这些扫描仪访问我们的内部网站：

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

在有问题的页面上只有一个输入，目标是在不打开安卓键盘的情况下输入输入，以便扫描条形码（然后将它们发送到数据库）

Answer 1

截至This answer，只读似乎工作。 我发现很难直接在输入上工作，所以我仍然会使用假输入的技巧。 将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>