如何始终将焦点保持在文本框中 [英] How to always focus keep focus in text box

问题描述

我创建了一个包含两个div的HTML页面。左边的div（页面的90％）是ajax结果的目标。右边的div（页面的10％）包含一个文本框。

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。

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.

我完成所有工作。没问题。

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>

（对于任何保持分数的人来说，该对象是Autodesk DWF查看器。它的行为很像flash，但是不接受所有相同的参数）。

(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).

始终将焦点放在文本框中的最佳方法是什么？因为操作员将使用条形码扫描仪，所以如果焦点丢失，我宁愿不要让鼠标点击回文本框。

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.

我宁愿不使用jquery，因为对于这样一个简单的请求来说似乎有些过分。但是，如果jquery是唯一的方式来实现这一点，那就没关系。

I would prefer to not use jquery, as it seems like overkill for such a simple request. HOWEVER, if jquery is the only way to accomplish this, then that's fine.

小提琴（ http://jsfiddle.net/g9YxB / 7 / ）已根据@subin的最新建议进行了更新。

fiddle (http://jsfiddle.net/g9YxB/7/) has been updated with the latest suggestion from @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?

推荐答案

使用jQuery看起来像这样：

Using jQuery would look something like this:

$(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示例： http://jsfiddle.net/laelitenetwork/fuMYX/5/

jsFiddle example: http://jsfiddle.net/laelitenetwork/fuMYX/5/

PS：jQuery仇恨会讨厌;）。

P.S: jQuery haters gonna hate ;).

这篇关于如何始终将焦点保持在文本框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！