javascript - How to use tab to go to a certain input? - Stack Overflow

admin管理员组

文章数量:1291007

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();
                }
            }
        });

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();
                }
            }
        });

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 1, 2012 at 9:23 Sameera Thilakasiri 9,5081010 gold badges5353 silver badges8787 bronze badges asked Jan 30, 2012 at 9:37 BeginnerBeginner 29.6k6565 gold badges160160 silver badges239239 bronze badges 3

• Are you sure you want to do that? How will the user input a value into qty? – IsisCode Commented Jan 30, 2012 at 9:40
• @Isiscode when the OP says 'click', I think they mean 'press key' - ie tab is the tab key. – Adam Hopkinson Commented Jan 30, 2012 at 9:41
• the user will enter their qty then tab to the add image and click enter – Beginner Commented Jan 30, 2012 at 9:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

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 ments)

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.

i think this will do the trick

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

$("#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.

本文标签： javascriptHow to use tab to go to a certain inputStack Overflow