我为我们的网站创建了一个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站点:
在相关页面上只有一个输入,目标是输入输入而不打开Android键盘以扫描条形码(然后将它们发送到数据库)< / p>
答案 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
属性,单击时,它将聚焦相关输入。
答案 1 :(得分:1)
试试这个:
我使用Bootstrap 4作为modal
和jQuery。
我忘了为什么.focus()
有时候没有执行,但我记得把它放进setTimeout()
时间为0
,这样就可以了。
以防您对代码感到困惑:
() => {}
类似于function() {}
,anonymous function
/callback
箭头函数是一种更简洁的函数编写方法,介绍 在
ES6
。箭头功能是匿名功能,这意味着你 无法命名。箭头函数不绑定到
this
,它们不会创建 他们自己的this
,因此正在使用封闭的this
。
$(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">×</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>