I was fiddling with preventDefault() and must be doing something wrong.

$("#input").bind("keypress", function(event) {
    if(event.which == 9) {
    event.preventDefault();
    alert("You pressed tab.");
    }
});

The tab functionality isn't prevented. What's wrong with this?

I was fiddling with preventDefault() and must be doing something wrong.

$("#input").bind("keypress", function(event) {
    if(event.which == 9) {
    event.preventDefault();
    alert("You pressed tab.");
    }
});

The tab functionality isn't prevented. What's wrong with this?

• javascript
• jquery
• keypress
• preventdefault

• What's it doing or not doing? – j08691 Commented Jun 24, 2014 at 21:00
• See the JSFiddle? No alert, and the functionality of tab remains. – user2700923 Commented Jun 24, 2014 at 21:01
• 1 Your fiddle is loading knockout but your question is labeled jQuery. – j08691 Commented Jun 24, 2014 at 21:01
• 1 There's a big difference between "keypress" and "keydown". A "keypress" can only be relied upon for keys that actually modify the value of the <input>. Chrome, for example, doesn't fire "keypress" for various ALT key binations. – Pointy Commented Jun 24, 2014 at 21:04
• 1 Maybe see this? – jacksondc Commented Jun 24, 2014 at 21:04

3 Answers 3

Try this FIDDLE. The input loses focus when you tab. Binding to the body fixes this.

$("body").on("keydown", function(event) {
if(event.which == 9) {
event.preventDefault();
    alert("You pressed tab.");
}
});

The keypress event is simply not fired when the Tab is pressed - this also explains why there is no alert, independent of what preventing the default may do.

Changing the code to use keydown allows the Tab to be caught and prevents the default focus-change (in Chrome¹, anyway).

$("#input").bind("keydown", function(event) {
    if(event.which == 9) {
        event.preventDefault();
    }
});

¹ I tested the above in Chrome 35 with jQuery 1.6-2.1; it does not work under the KO 3.0 library.

From the documentation on JQuery,

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

This method is a shortcut for .on( "keypress", handler ) in the first two variations, and .trigger( "keypress" ) in the third.

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.

So in this case you are using the wrong event. Also it might have browser patibility issues.