javascript jQuery 将焦点更改为选项卡或焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9378662/
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
jQuery change focus on tab or focusout
提问by matiasfh
(sorry for my english)
（对不起我的英语不好）
Hi!, i'm using jquery in an app where i have a dinamycally created table with text inputs inside like this:
嗨！，我在一个应用程序中使用 jquery，其中我有一个 dinamycally 创建的表，里面有这样的文本输入：
<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>
and in other part i have a button, when this button is clicked, create another line in the table.
在其他部分，我有一个按钮，当单击此按钮时，在表中创建另一行。
The container of this table and button exists inside a template.. this templates is rendered using underscore.js
此表和按钮的容器存在于模板中。此模板使用 underscore.js 呈现
Now the problem: I need to iterate over the inputs in order: code, type, price. When i fill the input price i calculate the total and shows up in the input, and then i need to change focus to the button (#more_button) to let the user click or press enter to create another line in table.
现在的问题是：我需要按顺序迭代输入：代码、类型、价格。当我填写输入价格时，我计算总价并显示在输入中，然后我需要将焦点更改为按钮 (#more_button) 以让用户单击或按 Enter 以在表中创建另一行。
I use this:
我用这个：
$('.price').blur(function(e){
_this.setTotal($(e.currentTarget).val());
$('#more_button').removeClass('inactive').focus();
e.preventDefault();
e.stopPropagation();
});
When the #more_button is focused the css background change.
当#more_button 聚焦时，css 背景会发生变化。
When i execute this piece of code, the button change the background but the focus inmediatly change to url bar. This happend in firefox and Chrome.
当我执行这段代码时，按钮会更改背景，但焦点会立即更改为 url 栏。这发生在 Firefox 和 Chrome 中。
I try to use this to set the focus:
我尝试使用它来设置焦点：
$('.price').blur(function(e){
_this.setTotal($(e.currentTarget).val());
$('#more_button').removeClass('inactive').;
setTiemout(function(){
$('#more_button').focus();
},100);
e.preventDefault();
e.stopPropagation();
});
But don't work either.....
但也不行.....
Can you give some guideline to acomplish this?
你能给出一些指导来完成这个吗？
The user can change the focus of input.price when press Tab or click in other part of the page.. in this moment i need to trigget seTotal and focus on the button.
用户可以在按 Tab 键或单击页面其他部分时更改 input.price 的焦点..此时我需要触发 setTotal 并专注于按钮。
回答by matiasfh
I don't know what the simple method
不知道有什么简单的方法
$('your_selector').focusout(function(){
$('#more_button').focus();
});
doesn't work with tab key (only with the mouse to change the focus).. so i solve using a mix between keydown event and focusout. like this:
不适用于 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;
});
where check()is a function to validate the value and tabis a flag to check if the tab key was pressed.
其中check()是验证值的函数，tab是检查是否按下了 Tab 键的标志。
回答by ggzone
$('your_selector').focusout(function(){
$('#more_button').focus();
});
works in FF and chrome here at least.
至少在这里适用于 FF 和 chrome。
here a fiddle: http://jsfiddle.net/Zabn4/
这里有一个小提琴：http: //jsfiddle.net/Zabn4/
