Change jQuery settings on tab or focus

Question

(sorry for my English)

Hi !, I am using jquery in an application where I have a dynamically created table with text inputs inside:

<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 another part I have a button, when this button is pressed, create another row in the table.

The container of this table and button exists inside the template .. these templates are rendered using underscore.js

Now the problem: I need to iterate over the inputs in order: code, type, price. When I fill in the input price, I calculate the total quantity and output it, and then I need to change the focus to the button (#more_button) so that the user presses or presses the enter key to create another row in the table.

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, css background change.

When I execute this piece of code, the button changes the background, but the focus on average changes to the url string. This happened in Firefox and Chrome.

I am trying 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 recommendations to do this?

The user can change the focus of the entry. Prices when they press Tab or click on another part of the page .. at this moment I need to start the selector and focus on the button.

Answer 1

I do not know what a simple method is.

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

does not work with the tab key (only with the mouse to change focus). So I decide to use a combination between the keydown event and the focus. eg:

 $('.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 check the value, and the tab - This is a flag to check if the tab key has been pressed.

Answer 2

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

works at least in FF and chrome.

here is the fiddle: http://jsfiddle.net/Zabn4/