CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Beginner
Beginner

Reputation: 29583

How to use tab to go to a certain input?

Currently when the user presses tab in the qty text box it does not tab to the add line image.

I want to add some jQuery in which would make it so that when the user presses the tab key within the qty text box it tabs to the add image where the user can click enter.

<td> 
    <input type="text" name="qty" id="qty" maxlength="3" class="txt" style="width: 80px;" />                         
</td>
<td> 
    <input type="image" src="/gfx/btn_addline.jpg" name="Add" value="Add" id="add"/>
</td>

Jquery affecting qty:

 $("#qty").keydown(function (event) {
            //alert(event.keyCode);
            if (event.keyCode == 13) {
                $("#add").click();
                return false;
            }
        });
   $("#qty").keydown(function (event) {
            // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        });

Upvotes: 2

Views: 6123

Answers (3)

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

$("#qty").keyup(function(event){
  if(event.keyCode=='9') { //9 is the tab key
    $("#add").focus();
    $("#add").select();
  }
});

Can you try focus and select together for Image field.

Upvotes: 0

James Allardice
James Allardice

Reputation: 166071

Assuming I've understood your question correctly, you should just use the tabindex attribute, which doesn't require any JavaScript:

<input type="text" tabindex="1"> <!--First input-->
<input type="text" tabindex="2"> <!--Press tab, you will end up here-->

Update (see comments)

If you already use tabindex to control tab order elsewhere on your page, just use higher indexes here. For example, if indexes 1-10 are used on other elements, use 11 and 12 here:

<input type="text" tabindex="11"> <!--First input-->
<input type="text" tabindex="12"> <!--Press tab, you will end up here-->

Update 2 (see updated question)

You are preventing the tab key from doing anything in your keydown event handler. Change to the following (add another condition that checks for the tab key):

if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
    // let it happen, don't do anything
}

This will work without the need for tabindex, assuming your two inputs are in order in your code and there are no inputs between them. If there are, use tabindex as well.

As a side note, you should use event.which instead of keyCode, since jQuery uses it to normalise browser inconsistencies.

Upvotes: 10

Jason
Jason

Reputation: 15931

i think this will do the trick

$("#qty").keyup(function(event){
  if(event.keyCode=='9') { //9 is the tab key
    $("#add").focus();
  }
});

Upvotes: 0

Related Questions