Question

我正在编写一个网页，页面上只有一个文本框，并显示由于给定数据而产生的信息。

我们的计划是，我们将在该特殊页面上使用条形码扫描仪或磁力扫描和触摸屏监视器。扫描学生卡时，它将自动回发并从数据源检索数据并显示在网页上。我们构建了示例页面并设法使其与真实数据一起使用。

样本数据可以是条形码或磁刷数据。

Sample Barcode Data - ?300203623;
Sample Magnetic Swiped Data - ;30020362300203622016?

两个输入设备（条形码扫描仪和磁力扫描）都会自动附加Enter键码。您可以根据需要禁用它。由于我们希望在扫描/滑动后将其发回，我们希望保持按原样键。

问题在于，当用户意外点击网页上的任何地方时，文本框会失去焦点，当再次扫描或刷卡时，它不会执行任何操作。因为文本框丢失了焦点，扫描数据没有插入到文本框中，也没有将帖子发回服务器。

我写了javascript，以便在失去焦点时重置文本框（id：Reference）。我可以在控制台上看到console.log行。但它没有把重点放在文本框上。我测试了FF，Chrome和＆amp; IE但是同样的问题。

$('#Reference').focusout(function () {
    console.log('on focusout' + new Date());
    $('#Reference').focus();
});

我的第一个问题是，只要失去焦点，我怎样才能重新关注文本框。

其次，我们做对了吗？如果我们想在将来添加“图片”或“链接”以触摸/点击该怎么办？如果我们继续强调文本框的重点，它会影响吗？

如果有更好的方法，请随时建议我。

Answer 1

使用blur而不是focusout它对我有用（使用普通的javascript，但也应该使用jquery）：

HTML

<textarea id = 'txt'></textarea>

的Javascript

document.getElementById("txt").addEventListener("blur", function(e){ setTimeout(function(){e.target.focus();}, 0); });

http://codepen.io/sergio0983/pen/bBbYzK

Answer 2

我刚试过你的代码 - 它在Chrome中运行，但对于Firefox我需要将其包装在超时中：

$('#input').focusout(function () {
    console.log('on focusout' + new Date());
    setTimeout(function() {
      $('#input').focus();
    });
});

$('#form').submit(function( event ) {
  console.log("submit", $("#input").val());
  event.preventDefault();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="text" id="input">
</form>

始终在文本框

2 个答案: