Jquery Focus on input field

Question

The HTML on the page has 20 <input> fields each named and given ID's in increasing order from 1 to 20.

If the variable id is set to the next sequential id (id + 1), this function will cause focus to apply to that field. However, when clicking outside of the current input field, the last one input field will not regain focus if the number entered is greater than 10, but an alert will be displayed.

$(":input").focusout(function(){
    var input = $(this).val();
    var id    = $(this).attr('id');
    if(input > 10){ 
        alert('You must enter a number between 0 and 10 '+id);
        $("#"+id).select();
    }
});

How can the last input field be set to regain focus?

Answer 1

Try replacing:

$("#"+id).select();

With:

$(this).focus();

In this case, $("#"+id) and $(this) are the same element, and I'm assuming you want to focus the element when there is an error.

Aside: I don't believe that id or name values can legally start with a number, you may want to prefix them with something like option1, option2, etc. It might work, but it might also cause issues later that are difficult to debug. Best to err on the side of caution and best practices.

What are valid values for the id attribute in HTML?

Edit: After failing to get focus() to work, I tried with setTimeout and was able to make it happen. I'm not sure why, or if this is really necessary, but it seems to work.

$(":input").focusout(function(){
    var $this = $(this),
        input = $this.val();

    if (input > 10){
        alert('You must enter a number between 0 and 10');
        setTimeout(function(){
        $this.focus();
        }, 1); 
    }
}); 

I'd love to hear if there is a better way to do this or an explanation. I suspect that the blur and focus events are not fired in an order that makes the previous method possible?

Demo: http://jsfiddle.net/zRWV4/1/

As mentioned in the comments, you should eventually make sure the value is an integer with parseInt or similar (you seem to already be aware of this).

Answer 2

replace

$("#"+id).select();

by

$("#"+id).focus();

or even by

$(this).focus();

Answer 3

(Try to use .blur() instead of .focusout(). But that probably won't help)

Try to remove the alert() for a while - it sometimes can make problems with focus...

Answer 4

You should parse the text inside the input to compare it with a number. var input = parseInt($(this).val()); '

   $(":input").blur(function(){
        var input = parseInt($(this).val());
        var id    = $(this).attr('id');
        if(input > 10){ 
            alert('You must enter a number between 0 and 10 '+id);
            $("#"+id).select();
        }
    });

Answer 5

jsFiddle Example

This is my code, I'll explain what I changed:

$('input[id^="input"]').focusout(function(){
    var selected = parseInt($(this).val(), 10);
    if (selected <= 10) {
        $("#input-"+selected).focus();
    }
    else {
        alert('Invalid Argument! 1-10 only!');
        $(this).focus();
    }
});

1. I use focus() instead of select() which won't work.
2. You confused id with select which caused you to always try and select $("#input-IDOFSELECTIONINPUT") instead of $("#input-IDOFWANTEDINPUT")
3. In your code, although an alert would have been thrown, the rest of the code would have continued normally. It won't in my code.
4. You've put your desired result ($("#"+id).select();) in the undesired condition (input > 10), which practically never gave it a chance.
5. Last but not least, I gave the inputs a better (and valid) id. IDs must not start with a number.