javascript - Prevent keypress whilst shift key is held - Stack Overflow

I'm trying to prevent certain keys from being entered into an input box, but only if that particular key is pressed whilst the shift key is held:

$('selector').keydown(function(e) {
  console.log(e.shiftKey);
  if (e.shiftKey && e.which == 51) {
    e.preventDefault();
    alert('Disallowed');
  }
});

The alert fires but the character still appears in the text box.

I've tried searching around for an explanation as to why this happens but to no avail, any help would be greatly appreciated!

edit

Removing the alert seems to fix the problem (which seems bizarre), I'd really love to know why it behaves in this way though, it doesn't seem to make any sense.

Thanks

I'm trying to prevent certain keys from being entered into an input box, but only if that particular key is pressed whilst the shift key is held:

$('selector').keydown(function(e) {
  console.log(e.shiftKey);
  if (e.shiftKey && e.which == 51) {
    e.preventDefault();
    alert('Disallowed');
  }
});

The alert fires but the character still appears in the text box.

I've tried searching around for an explanation as to why this happens but to no avail, any help would be greatly appreciated!

edit

Removing the alert seems to fix the problem (which seems bizarre), I'd really love to know why it behaves in this way though, it doesn't seem to make any sense.

Thanks

• javascript
• jquery

Share Improve this question Follow edited Jun 29, 2012 at 16:14 billyonecan asked Jun 29, 2012 at 14:25 billyonecanbillyonecan 20.3k99 gold badges4444 silver badges6565 bronze badges 5

• replacing e.preventDefault(); with return false will do the job – Teneff Commented Jun 29, 2012 at 14:27
• I've tried that and it doesn't appear to work :| – billyonecan Commented Jun 29, 2012 at 14:30
• jsfiddle/GEngv works just fine (in firefox)! – rodneyrehm Commented Jun 29, 2012 at 14:36
• Seems really odd, the alert fires but the key still appears in the text box.. I've tested in FF 14.x and Chrome 19.x – billyonecan Commented Jun 29, 2012 at 14:38
• Are you trying to prevent a pound sign £ from being typed into an input box? If so, wouldn't it be easier or more usable to just validate the field or ignore/allow the symbol? There are a few ways to get a pound sign into a field, drag/drop, copy/paste, ALT+0163 (on the numeric keypad). – Lee Kowalkowski Commented Jun 29, 2012 at 15:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Just use e.which instead of e.keyCode

$('#input').keydown(function(e) {
  if (e.shiftKey && e.which == 51) {
    e.preventDefault();
    alert('Disallowed');
  }
});

Working sample

Because, From jQuery doc:

For key or mouse events, this property indicates the specific key or button that was pressed.The event.which property normalizes event.keyCode and event.charCode. It is remended to watch event.which for keyboard key input. event.which also normalizes button presses (mousedown and mouseupevents), reporting 1 for left button, 2 for middle, and 3 for right. Use event.which instead of event.button.

Try this on .keyup()

$('#input').keyup(function(e) {
   var val = $.trim( this.value );
  if (e.shiftKey && e.which == 51) {
    $(this).val(val.replace(/\#/,''));
  }
});

DEMO

​

If you're trying to remove pound sign from input then try:

$(this).val( val.replace(/\u00A3/g, '') );

Full code

$('#input').keyup(function(e) {
   var val = $.trim( this.value );
  if (e.shiftKey && e.which == 51) {
    $(this).val( val.replace(/\u00A3/g, '') );
  }
});

If the question is now: why does alert() make a difference?

alert is a funny statement (and confirm and prompt), it suspends execution of your JavaScript, but frees up any other browser processing that was waiting for your JavaScript to execute. It can interfere with debugging quite a lot.

The browser won't respond to your preventDefault() statement until your JavaScript has finished, putting alert in there has suspended your JavaScript, so the browser hasn't received a return status of the event at this point, and unfortunately the alert has allowed the browser to process other events, namely keypress which sneaks past and hence you see the character you don't want to be typed appear.

You could not use alert, or, if you need it (?!) you could issue it wrapped in a setTimeout, so that it doesn't block your JavaScript and the result of the keydown will lead to the keypress being suppressed.

--

Or, you could have used keypress in the first place!

$('selector').keypress(function(e) {
  console.log(e.shiftKey);
  if (e.which == 163) {
    e.preventDefault();
    alert('Disallowed');
  }
});

That still doesn't prevent characters being entered by alternative methods though, so I wouldn't entertain this in the first place, personally. :-/

$('#selector').keydown(function(e) {
  console.log(e.shiftKey);
  if (e.shiftKey && e.keyCode == 51) {
    $(this).prop('disabled', true);
    //do something, fade an object in...display a message, etc
    setTimeout(function(){
      $(this).prop('disabled', false);
    }, 500);
  }
});

This works for me.

EDIT

Added setTimeout function to replicate your desire.