Event.keyCode doesn't work with 'on input' - undefined

Question

Currently I'm working on a feature for a project and event.keyCode appears doesn't work for "on input" trigger. I'm using Google Chrome 31 and jQuery 1.10.2.

Here's what I tried inside my method:

input.on('input', function(event){
    console.log("event.charCode: " + event.charCode);
    console.log("event.keyCode: " + event.keyCode);
    console.log("event.which: " + event.which);
    console.log("window.event ? event.keyCode : event.which: " + window.event ? event.keyCode : event.which);
});

enter image description here

I get undefined for all this methods. Am I doing something wrong or this is a jQuery / Javascript issue? Here you can find the fiddle.

I want that my input fires when user paste something inside it or change, by any way, the input content.

p.s: my method works as expected, the only thing that doesn't work is...this.

Similar - http://stackoverflow.com/questions/686995/catch-paste-input — dan richardson, Jan 16 '14 at 11:30
your input event is an input event, not a `keyup`/`keydown` event. Therefore it will not have the properties you're trying to get. — dan richardson, Jan 16 '14 at 13:19

score 5 · Answer 1 · answered Jan 16 '14 at 11:28

5

Use can use keydown Event

input.on('keydown ', function(event){
    console.log("Code: " + event.which);
});

answered Jan 16 '14 at 11:28

Shhade Slman

263
2
10

you can trigger your custom event from inside javascript/jquery events like the change/keydown/paste and pass the event param to your custom event – Shhade Slman Jan 16 '14 at 12:08

score 5 · Answer 2 · answered Mar 19 '21 at 16:39

5

The event input does not have the keycode, but you can use the inputType property that way.

console.log(event.inputType);

event.inputType == "deleteContentBackward" // Backspace
event.inputType == "deleteContentForward"  // Delete
event.inputType == "insertText"            // When insert character

answered Mar 19 '21 at 16:39

Julio Cesar Brito Gomes

544
7
14

This is the correct answer for the InputEvent type. Thanks man. – Mehmet Apr 21 '22 at 14:28
works like a sharm – Mohamed Elmancy May 31 '23 at 15:21

dan richardson · Answer 3 · 2014-01-16T11:46:42.770

2

I think it's because your event isn't correct, you're matching an "input" event for the input.
This might be what you're after (notice the paste event):

jQuery(function () {
  jQuery("#post-input").on('keyup', function(event){
    if(!(event.ctrlKey || $(this).data('skipkeyup'))) {
        console.log('keyup', event);
    } else {
        $(this).data('skipkeyup', true)
    }
  }).on('paste', function (event) {
      console.log('paste event', event);
  }).on('keydown', function(){
      $(this).data('skipkeyup', false)
  })

});

http://jsfiddle.net/uBZF9/9/

edited Jan 16 '14 at 11:46

answered Jan 16 '14 at 11:09

dan richardson

3,871
4
31
38

Thanks for your reply, but 'keyup' trigger doesn't fire every event I want. I want that my input fires when user paste something inside it or change, **by any way**, the input content. – Paladini Jan 16 '14 at 11:10
changed it to `change`, that would work. You might want to verify the type of event though in your code, depending on what you're trying to achieve. Depending on requirements you could set up a different event handler for each event if you want to do something different each time – dan richardson Jan 16 '14 at 11:12
_“I want that my input fires when user paste something inside it”_ – what the user pastes into the input field may be more than one character, so expecting a keycode in that case makes no sense IMHO. – CBroe Jan 16 '14 at 11:16
That's why I changed it to `change` and said you'll want to check the event. **But** a paste will actually still create a keycode event if you use the keyboard to paste! – dan richardson Jan 16 '14 at 11:18
@danrichardson I'm trying here. While you wait, can take a look at my Fiddle? – Paladini Jan 16 '14 at 11:21
I tried with `change` and doesn't appears to work too. Edit (and don't save) the Fiddle with `change`, you'll see. Any alternative to `change`? – Paladini Jan 16 '14 at 11:23
It seems that `change` only fires after user exits the input :/ - And when it fire, give me a `undefined` too. – Paladini Jan 16 '14 at 11:26
Check out the last fiddle - http://jsfiddle.net/uBZF9/9/ Should give you some flexibility – dan richardson Jan 16 '14 at 11:47
I'm trying change from `input` to another triggers, but at the moment I didn't find a way to properly do it. Thanks for your reply and helped me, but I can't give you the best answer. I posted this issue in jQuery GitHub, follow it if you want: https://github.com/jquery/api.jquery.com/issues/418. I will wait for they reply, so I talk to people here about what they reply. – Paladini Jan 16 '14 at 12:38
What exactly are you trying to achieve? There is nothing wrong with the "input" event. It's doing what it seems that you want. I'd update your question. My latest fiddle works with multiple events - http://jsfiddle.net/uBZF9/11/ – dan richardson Jan 16 '14 at 13:00
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45375/discussion-between-dan-richardson-and-fernando-paladini) – dan richardson Jan 16 '14 at 13:24

FreshPro · Answer 4 · 2014-01-16T12:01:22.893

1

Check this Fiddle

I'm not sure is that what you want but here you go

input.on('keyup keydown copy', function(event){
    console.log("Code: " + event.keyCode);
    console.log("Code: " + event.which);
    console.log("Code: " + window.event ? event.keyCode : event.which);
});

edited Jan 16 '14 at 12:01

answered Jan 16 '14 at 11:32

FreshPro

875
3
14
35

1

Thanks, this almost helped me. :P – Paladini Jan 16 '14 at 11:47
Hehe, almost :) At least, you have some ideas now, that's the point. Glad i could help – FreshPro Jan 16 '14 at 11:48
I'd be careful doing too much in the function if you're using keydown,. Otherwise you'll have the event firing constantly whilst you have shift or ctrl pressed down when inside the input. Better to have just keyup. – dan richardson Jan 16 '14 at 12:08
Using jQuery, you do not need to check both `event.keyCode` and `event.which`. One or the other will suffice. – Martin James Jun 18 '18 at 14:14

score 1 · Answer 5 · answered Mar 11 '21 at 09:54

That is because you are using onkeypress instead of onkeydown!

Try doing it with onkeydown and you will be able to access e.keyCode.

so instead of:

<input onkeypress="getKeyValue()"/>

You should do:

<input onkeydown="getKeyValue()"/>

I hope this helps, good luck mate!

score 0 · Answer 6 · edited Aug 25 '20 at 08:39

0

Try the use of addEventListener, where you can specify the name of the event as string and include the action event as parameters:

  let keyCode;
  input.addEventListener('keydown', (e) => {
    keyCode = e.keyCode
  });
  input.addEventListener('input', (e) => {
    console.log(keyCode)
  })

edited Aug 25 '20 at 08:39

xKobalt

1,498
2
13
19

answered Aug 25 '20 at 06:17

Armen Nersisyan

313
2
3
11

score 0 · Answer 7 · answered Mar 11 '21 at 10:04

You can use a better way to achieve the same thing without bother yourself with key's events, and that by adding a hidden input, and then track its change events to get the key pressed and use it, that way you don't have to worry about key codes, or anything else.

Event.keyCode doesn't work with 'on input' - undefined

7 Answers7

Linked