javascript 如何始终聚焦在文本框中保持焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19495831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to always focus keep focus in text box
提问by Edward
I have created a single HTML page that contains two divs. The div on the left (90% of page) is the target for ajax results. The div on the right (10% of page) contains a single text box.
我创建了一个包含两个 div 的 HTML 页面。左侧的 div（页面的 90%）是 ajax 结果的目标。右侧的 div（页面的 10%）包含一个文本框。
The idea for the page is to enter a part number to the text box (via a barcode scanner) and display the drawing which matches that part number, show up in the left div.
该页面的想法是在文本框中输入零件编号（通过条形码扫描仪）并显示与该零件编号匹配的图纸，并显示在左侧 div 中。
I have all of that working. No problems there.
我有所有这些工作。没有问题。
What I can't figure out, is how to return the focus to the textbox after the drawing loads.
我想不通的是如何在绘图加载后将焦点返回到文本框。
The drawing is being loaded as an object, like this:
绘图作为对象加载，如下所示：
<div id="viz">
<object classid="clsid:A662DA7E-CCB7-4743-B71A-D817F6D575DF" width="640" height="480">
<param name="src" value="name_of_file.dwf" />
<param name="wmode" value="transparent" />
<param name="UserInterfaceEnabled" value="false" />
<param name="NavigatorDocked" value="true" />
<param name="ToolbarVisible" value="false" />
<embed width="100%" height="100%" wmode="transparent" src="<?php echo $drawingfullpath;?>" ></embed>
</object>
</div>
(For anyone keeping score, that object is Autodesk DWF viewer. it acts a lot like flash, but doesn't accept all of the same parameters).
（对于任何记分的人，该对象是 Autodesk DWF 查看器。它的作用很像 Flash，但不接受所有相同的参数）。
What is the best way to always keep focus in the text box? Because the operator will be using a barcode scanner, I'd rather not have them require a mouse to click back into the text box if focus is lost.
始终将焦点集中在文本框中的最佳方法是什么？因为操作员将使用条码扫描仪，所以我不想让他们在失去焦点时需要鼠标点击回到文本框。
I would prefer to not use jquery, as it seems like overkill for such a simple request. HOWEVER, if jquery is the onlyway to accomplish this, then that's fine.
我宁愿不使用 jquery，因为对于这样一个简单的请求来说，这似乎有点过分了。但是，如果 jquery 是完成此操作的唯一方法，那很好。
update
更新
fiddle (http://jsfiddle.net/g9YxB/7/) has been updated with the latest suggestion from @subin.
fiddle ( http://jsfiddle.net/g9YxB/7/) 已更新为@subin 的最新建议。
The focus is still lost once the object loads. HOWEVER, if you click away from the page and then click back, the focus is where it belongs (in the text box). That has to be a clue, right?
一旦对象加载，焦点仍然丢失。但是，如果您单击离开页面然后单击返回，则焦点位于它所属的位置（在文本框中）。这应该是个线索吧？
回答by Subin
Use setInterval :
使用 setInterval ：
setInterval(function(){
var focusbox;
focusbox = document.getElementById("part_to_search");
focusbox.focus();
});
Jsfiddle http://jsfiddle.net/g9YxB/10/
jsfiddle http://jsfiddle.net/g9YxB/10/
回答by José SAYAGO
Using jQuery would look something like this:
使用 jQuery 看起来像这样：
$(function() {
// Focus on load
$('.scanner').focus();
// Force focus
$('.scanner').focusout(function(){
$('.scanner').focus();
});
// Ajax Stuff
$('.scanner').change(function() {
$.ajax({
async: true,
cache: false,
type: 'post',
url: '/echo/html/',
data: {
html: '<p>This is your object successfully loaded here.</p>'
},
dataType: 'html',
beforeSend: function() {
window.alert('Scanning code');
},
success: function(data) {
window.alert('Success');
$('.objectWrapper').append(data);
},
// Focus
complete: function() {
$('.scanner').val('').focus();
}
});
});
});
jsFiddle example: http://jsfiddle.net/laelitenetwork/fuMYX/5/
jsFiddle 示例：http: //jsfiddle.net/laelitenetwork/fuMYX/5/
P.S: jQuery haters gonna hate ;).
PS：讨厌 jQuery 的人会讨厌 ;)。
