Prevent keypress whilst shift key is held

Question

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

replacing `e.preventDefault();` with `return false` will do the job — Teneff, Jun 29 '12 at 14:27
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, Jun 29 '12 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, Jun 29 '12 at 15:23

thecodeparadox · Answer 1 · 2012-06-29T15:41:26.550

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 recommended 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, '') );
  }
});

edited Jun 29 '12 at 15:41

answered Jun 29 '12 at 14:29

thecodeparadox

86,271
21
138
164

It doesn't work for me :| the character still appears in the box despite the alert being displayed. I've tested in Chrome 19.x and FF 14.x, thanks for the info regarding `e.which` though, I shall use that from now on! +1 – billyonecan Jun 29 '12 at 14:35
@deifwud please check my second demo – thecodeparadox Jun 29 '12 at 14:44
Same thing with that one too, the character still appears in the text box :/ – billyonecan Jun 29 '12 at 14:49
Lol, except SHIFT+3 on my keyboard is `£` of course, `#` has it's own key without SHIFT. What's the requirement again? – Lee Kowalkowski Jun 29 '12 at 15:08
Sorry Lee I should have been more specific - I am actually trying to capture the `£` key – billyonecan Jun 29 '12 at 15:19
@deifwud to remove pound sign, I've edited my answer, check that – thecodeparadox Jun 29 '12 at 15:42
Upvoted for `e.which`, but I think `keypress` would be a better match for this requirement. – Lee Kowalkowski Jun 29 '12 at 16:02

Lee Kowalkowski · Accepted Answer · 2012-06-29T16:17:18.540

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. :-/

Ohgodwhy · Answer 3 · 2012-06-29T15:01:40.317

1

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

edited Jun 29 '12 at 15:01

answered Jun 29 '12 at 14:42

Ohgodwhy

49,779
11
80
110

conditionalize the statements, disable the property, then put a setTimeout and reenable it. – Ohgodwhy Jun 29 '12 at 14:55

Prevent keypress whilst shift key is held

3 Answers3

Try this on `.keyup()`

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

Linked

Prevent keypress whilst shift key is held

3 Answers3

Try this on .keyup()

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

Linked

Try this on `.keyup()`