javascript - 始终将文本光标设置在文本框上

Question

我正在编写一个网页，该网页上只有 1 个文本框，并根据给定的数据显示信息。

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

示例数据可以是条形码或磁刷数据。

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

两种输入设备(条形码扫描仪和磁力刷卡)都会自动附加 Enter 键码。如果需要，您可以禁用它。由于我们希望在扫描/滑动后将其发回，因此我们更愿意保留 Enter 键不变。

问题在于，当用户不小心点击网页上的任意位置时，文本框就会失去焦点，并且当再次扫描或刷卡时，它不会执行任何操作。因为文本框失去了焦点，扫描的数据没有插入到文本框中，也没有发送回服务器。

我编写了 javascript，以便在文本框(id:Reference)失去焦点时重置焦点。我可以在控制台上看到 console.log 行。但它没有将焦点设置在文本框上。我在 FF、Chrome 和 IE 上测试过，但有同样的问题。

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

我的第一个问题是当文本框失去焦点时如何重新聚焦它。

其次，我们做的事情正确吗？如果我们将来想添加“图像”或“链接”来触摸/点击怎么办？如果我们继续将焦点强制到文本框，会产生影响吗？

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

Answer 1

使用模糊而不是焦点，它对我有用(使用纯 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