jQuery 将焦点更改为选项卡或焦点

Question

（抱歉我的英语）

嗨！，我在一个应用程序中使用jquery，其中我有一个动态创建的表，其中包含如下文本输入：

<td><input type="text" id="code"></td>
<td><select id="type"><option value="0">Normal</option><option value="1">Other</option></select></td>
<td><input type="text" id="price" class="price"></td>
<td><input type="text" id="total"></td>

在其他部分我有一个按钮，当单击此按钮时，在中创建另一行桌子。

该表格和按钮的容器存在于模板内。该模板是使用 underscore.js 呈现的。

现在的问题是：我需要按顺序迭代输入：代码、类型、价格。当我填写输入价格时，我计算总计并显示在输入中，然后我需要将焦点更改为按钮（#more_button）以让用户单击或按 Enter 键在表中创建另一行。

我使用这个：

$('.price').blur(function(e){
    _this.setTotal($(e.currentTarget).val());
    $('#more_button').removeClass('inactive').focus();

    e.preventDefault();
    e.stopPropagation();
});

当 #more_button 聚焦时，CSS 背景发生变化。

当我执行这段代码时，按钮会更改背景，但焦点会立即更改为网址栏。这发生在 Firefox 和 Chrome 中。

我尝试用它来设置焦点：

   $('.price').blur(function(e){
    _this.setTotal($(e.currentTarget).val());
    $('#more_button').removeClass('inactive').;
    setTiemout(function(){
         $('#more_button').focus();
    },100);
    e.preventDefault();
    e.stopPropagation();
}); 

但也不起作用......

你能给一些指导来完成这个吗？

当按 Tab 或单击页面的其他部分时，用户可以更改 input.price 的焦点。此时我需要触发 seTotal 并将焦点放在按钮上。

Answer 1

我不知道什么简单的方法

$('your_selector').focusout(function(){
   $('#more_button').focus();
});

不适用于 Tab 键（只能使用鼠标来更改焦点）..所以我使用 keydown 事件和 focusout 之间的混合来解决。像这样：

$('.price').bind('keydown',function(e){
    if(e.keyCode === 9){//Tab key
    tab = true;
    check(e);
        return false;
}

 }).bind('focusout',function(e){
if(!tab){
    check(e);
}else{
    tab = false;    
} 
e.preventDefault();
return false;
 });

其中 check() 是验证值的函数，tab 是检查是否按下 Tab 键的标志。

Answer 2

$('your_selector').focusout(function(){
  $('#more_button').focus();
});

至少可以在 FF 和 chrome 中使用。

这里有一个小提琴： http://jsfiddle.net/Zabn4/

Answer 3

最现代的解决方案（jQuery 1.7+）是使用以下代码：

$('#your-input').on('focusout', function(e){
   $('#submit-btn').focus();
});