如何模拟自动对焦

时间:2018-06-06 08:21:02

标签: javascript jquery html

我为我们的网站创建了一个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>

2 个答案:

答案 0 :(得分:2)

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/

答案 1 :(得分:1)

试试这个:

我使用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>