始终在文本框上设置文本光标
Always setting the text cursor on Textbox
我正在编写一个网页,该网页将只有 1 个文本框并根据给定数据显示信息。
我们的计划是,我们将为该特殊页面使用条码扫描器或磁刷和触摸屏监视器。扫描学生证时,会自动post从数据源中返回并检索数据并显示在网页上。我们已经构建了示例页面并设法使其与真实数据一起使用。
示例数据可以是条形码或磁条数据。
Sample Barcode Data - ?300203623;
Sample Magnetic Swiped Data - ;30020362300203622016?
两种输入设备(条形码扫描仪和磁条)都会自动附加回车键码。如果你愿意,你可以禁用它。因为我们想 post 它在 scanning/swiping 之后返回,所以我们更愿意保留 Enter 键原样。
问题是,当用户不小心点击网页上的任意位置时,文本框失去焦点,当再次扫描或刷卡时,它没有任何反应。因为文本框失去了焦点,扫描的数据没有插入到文本框,也没有 post 返回服务器。
我写了 javascript 来在文本框 (id: Reference) 失去焦点时重置焦点。我可以在控制台上看到 console.log 行。但它没有将焦点设置在文本框上。我在 FF、Chrome 和 IE 上测试过,但同样的问题。
$('#Reference').focusout(function () {
console.log('on focusout' + new Date());
$('#Reference').focus();
});
我的第一个问题是当文本框失去焦点时如何重新聚焦它。
其次,我们做的对吗?如果我们以后想在touch/click中添加'image'或者'link'怎么办?如果我们一直强制焦点到文本框,它会影响吗?
如果有更好的方法,欢迎提出来。
我刚刚尝试了您的代码 - 它在 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>
使用 blur 而不是 focusout 它对我有用(使用普通 javascript,但也应该与 jquery 一起使用):
HTML
<textarea id = 'txt'></textarea>
Javascript
document.getElementById("txt").addEventListener("blur", function(e){ setTimeout(function(){e.target.focus();}, 0); });
我正在编写一个网页,该网页将只有 1 个文本框并根据给定数据显示信息。
我们的计划是,我们将为该特殊页面使用条码扫描器或磁刷和触摸屏监视器。扫描学生证时,会自动post从数据源中返回并检索数据并显示在网页上。我们已经构建了示例页面并设法使其与真实数据一起使用。
示例数据可以是条形码或磁条数据。
Sample Barcode Data - ?300203623;
Sample Magnetic Swiped Data - ;30020362300203622016?
两种输入设备(条形码扫描仪和磁条)都会自动附加回车键码。如果你愿意,你可以禁用它。因为我们想 post 它在 scanning/swiping 之后返回,所以我们更愿意保留 Enter 键原样。
问题是,当用户不小心点击网页上的任意位置时,文本框失去焦点,当再次扫描或刷卡时,它没有任何反应。因为文本框失去了焦点,扫描的数据没有插入到文本框,也没有 post 返回服务器。
我写了 javascript 来在文本框 (id: Reference) 失去焦点时重置焦点。我可以在控制台上看到 console.log 行。但它没有将焦点设置在文本框上。我在 FF、Chrome 和 IE 上测试过,但同样的问题。
$('#Reference').focusout(function () {
console.log('on focusout' + new Date());
$('#Reference').focus();
});
我的第一个问题是当文本框失去焦点时如何重新聚焦它。
其次,我们做的对吗?如果我们以后想在touch/click中添加'image'或者'link'怎么办?如果我们一直强制焦点到文本框,它会影响吗?
如果有更好的方法,欢迎提出来。
我刚刚尝试了您的代码 - 它在 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>
使用 blur 而不是 focusout 它对我有用(使用普通 javascript,但也应该与 jquery 一起使用):
HTML
<textarea id = 'txt'></textarea>
Javascript
document.getElementById("txt").addEventListener("blur", function(e){ setTimeout(function(){e.target.focus();}, 0); });