0

I'm attempting to capture all key events for my JQuery app. When using the keydown event, I'm able to get enter and tab events, but all letters are uppercase. So, I tried switching to keypress which I heard is lower + uppercase letters. This worked, except it wouldn't capture enter and tab events anymore. Is there a best of both worlds? How can I capture all events, case sensitive including keys like enter, tab, shift, alt, etc.

Scooter
  • 1,031
  • 1
  • 14
  • 33
  • `.on('keypress,keydown'.....` may be? – Gogol Feb 27 '16 at 18:50
  • but wouldn't two events be called? How can i distinguish between the codes generated for each of the events? For example, if its a letter key pressed, I want the character code from the `keypress` event and if its a non-letter key I need the code from the `keydown` event. – Scooter Feb 27 '16 at 18:51
  • nope you can't capture enter and tab in key press. – Sathik Khan Feb 27 '16 at 18:58
  • for some strange reason, keypress captures enter and tab keys without a problem.. What browser did you use by the way? I am using firefox latest. – Gogol Feb 27 '16 at 19:27
  • I'm using chrome. For example, delete is only captured by `keydown` not by `keypress`. – Scooter Feb 27 '16 at 19:29
  • 1
    First of all `keypress` is not an official specified event (see [w3c: keypress](https://w3c.github.io/uievents/#event-type-keypress)) , and therefore it might differ between browsers, the event suggested by the specs instead of `keypress` is `beforeinput` and this name is more descriptive and explains why you get certain events and why not, `beforeinput` (or `keypress`) will only occur, if it results in an input. `keydown`: physical key that is pressed, `keypress`/`beforeinput` the input (character value) that results out of the pressed key. – t.niese Feb 27 '16 at 19:43

4 Answers4

0

In key down event, call the method with event as a parameter and add this line,

e.preventDefault()

This will suspend the action.

Thanks,

Sathik Khan
  • 439
  • 4
  • 13
0

How about doing this?

$(window).on('keydown keypress', function(e) {
  e.preventDefault();
  var code = e.keyCode || e.which;
  console.log(code);
});

What this should do in theory is prevent the other event getting fired, but because we are calling both keydown and keypress, one of them will surely be fired. Now this can have negative effect on the rest of your code, so please use it carefully.

Gogol
  • 3,033
  • 4
  • 28
  • 57
  • 1
    I have decided to do `.on('keydown keypress', function(e) { ... }` and then in the function I check to see which event it is. If its a `keydown` event, I handle enter, delete, tab, etc.. and if its a `keypress` event I handle letters. – Scooter Feb 27 '16 at 19:22
0

Hope this helps what you are try to do

$(document.body).on('keypress', function(e) {
  var keycode = e.keyCode;

  var valid =
    (keycode > 47 && keycode < 58) || // number keys
    keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
    (keycode > 64 && keycode < 91) || // letter keys
    (keycode > 95 && keycode < 112) || // numpad keys
    (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
    (keycode > 218 && keycode < 223); // [\]' (in order)
  if (valid) {
    console.log(keycode + ' keypress'); //printable char on keypress
  }

});

$(document.body).on('keyup', function(e) {
  var keycode = e.keyCode;
  var valid =
    (keycode > 47 && keycode < 58) || // number keys
    keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
    (keycode > 64 && keycode < 91) || // letter keys
    (keycode > 95 && keycode < 112) || // numpad keys
    (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
    (keycode > 218 && keycode < 223); // [\]' (in order)
  if (!valid) {
    console.log(keycode + ' keyup'); //non printable char on keyup
  }
});

got visible characters validation from this SO link

Community
  • 1
  • 1
Pavan Teja
  • 3,192
  • 1
  • 15
  • 22
-1
 $(".num").keypress(function (e) {
    console.log('[keypress] key' + e.key + ' keyCode' + e.keyCode + ' which' + e.which);
    var kc = e.keyCode || e.which;
    if (kc < 48 || kc > 57)/* number keys*/ {
        //$.alertme('no');
        if (e.preventDefault) {
            e.preventDefault();
            console.log('[keypress] preventDefault');
        } else {
            e.returnValue = false;
            console.log('[keypress] returnValue');
        }
    }
    //$.alertme('ok');
    //var re = /[0-9]/.test(e.key);//not working android browser
    //if (!re) {
    //    if (e.preventDefault) {
    //        e.preventDefault();
    //    } else {
    //        e.returnValue = false;
    //    }
    //}
});

check for only number add num class to input text

Rom Mil
  • 19
  • 1
  • 2