javascript - 如何始终聚焦将焦点保持在文本框中

标签 javascript html

我创建了一个包含两个 div 的 HTML 页面。左侧的 div(页面的 90%)是 ajax 结果的目标。右侧的 div(占页面的 10%)包含一个文本框。

该页面的想法是在文本框中输入部件号(通过条形码扫描器)并显示与该部件号匹配的图纸,显示在左侧 div 中。

我有所有这些工作。那里没有问题。

我想不通的是如何在绘图加载后将焦点返回到文本框。

绘图正在作为对象加载,如下所示:

<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,但不接受所有相同的参数)。

始终将焦点保持在文本框中的最佳方法是什么?因为运算符(operator)将使用条形码扫描仪,所以我不想让他们在失去焦点时需要鼠标单击回到文本框。

我宁愿不使用 jquery,因为对于这样一个简单的请求来说它似乎有点矫枉过正。但是,如果 jquery 是实现此目的的唯一方法,那很好。


更新

fiddle ( http://jsfiddle.net/g9YxB/7/ ) 已根据@subin 的最新建议进行了更新。

一旦对象加载,焦点仍然丢失。但是,如果您单击离开页面然后单击返回,则焦点位于它所属的位置(在文本框中)。这一定是个线索,对吧?

最佳答案

使用 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 示例:http://jsfiddle.net/laelitenetwork/fuMYX/5/

P.S:讨厌 jQuery 的人会讨厌 ;)。

关于javascript - 如何始终聚焦将焦点保持在文本框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19495831/

相关文章:

javascript - 通过删除一个参数及其值来清理 URL

javascript - 错误 : Uncaught ReferenceError: module is not defined when using module. 导出

javascript - 如何使用 Highcharts 创建行隔离热图

javascript - 如何使用 jQuery 在视频中滑动并同时自动播放?

php - HTML/PHP 表单问题

javascript - 为什么会出现 "this"行为?

javascript - AJAX使用GET方法加载php文件,加载时但某些jquery插件没有出现

javascript - JavaScript 中的函数参数是否被提升?

javascript - 如何让按钮在点击时显示

css - 更改引导导航栏,使链接占据整个空间