CODEWITHSUNDEEP
jquery
Sparky
Sparky

Reputation: 883

Restricting tabbing through input field using JavaScript key code 9

I'm trying to prevent a user from using the tab key to tab through input boxes on a form with the following code

$(document).ready(function(){
    $(":input").on("keydown", noTab);
});

function noTab(evt){
    $(this).keypress(function(e){
        if(e.keyCode == 9)
            e.preventDefault();
    })
}

but it is not working as I am still able to use the tab key to tab through my input fields. I have a similar function for restricting a user from using the spacebar, which does work.

$(document).ready(function(){
    $(":input").on("keydown", noSpace);
});

function noSpace(evt){
    // prevent user from entering a space
    $(this).keypress(function(e){
        if(e.keyCode == 32)
            e.preventDefault();
    });
}

Where did I go wrong?

EDIT: I'm using UIKit for the front end html

Upvotes: 0

Views: 381

Answers (2)

IronFlare
IronFlare

Reputation: 2322

I used jQuery to cancel the keydown event when Tab is being pressed. It's working fine for me in Chrome. Hope this helps!

$("input").keydown(function(e){
    if ((e.which || e.keyCode || e.charCode) == 9) {
        e.preventDefault();
    }
});

DEMO

Upvotes: 0

George
George

Reputation: 36784

You can set the tabindex to -1 to prevent tabbing to an <input> field:

<input type="text" tabindex="-1">

If you must use JavaScript/jQuery to change the tabIndex property after the page loads:

$(':input').prop('tabIndex', -1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">

Upvotes: 1

Related Questions