CODEWITHSUNDEEP
javascriptjqueryfirefox
matiasfha
matiasfha

Reputation: 1290

jQuery change focus on tab or focusout

(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:

<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

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.

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.

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.

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.

Upvotes: 4

Views: 15918

Answers (3)

Avyn E.
Avyn E.

Reputation: 46

The most modern solution (jQuery 1.7+) is to use the following code:

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

Upvotes: 0

matiasfha
matiasfha

Reputation: 1290

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:

$('.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 tab is a flag to check if the tab key was pressed.

Upvotes: 3

ggzone
ggzone

Reputation: 3721

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

works in FF and chrome here at least.

here a fiddle: http://jsfiddle.net/Zabn4/

Upvotes: 1

Related Questions