How to get the value inside addEventListener?

Question

This code seems to be the only one to output which keycode has been pressed on Android devices:

var input_field = document.getElementById('photo-id');

input_field.addEventListener('textInput', function(e) {
    var char = e.data;
    var keyCode = char.charCodeAt(0);

    return true;
});

I need the result value of keyCode outside of this function. I tried return keyCode; instead of return true; but this doesn't work.

How can I achieve this?

EDIT: Detailed explanation.

I'm using TagIt (http://aehlke.github.io/tag-it) and I'm trying to modify the code inside a function this.tagInput.keydown(function(event) { which checks if a comma or space has been pressed to seperate words into tags. I don't know how excatly to pass it to this function or where to put the addEventListener? Like I mentioned I just need to make this addition to recognize Android device keycodes.

EDIT2: Code stripped down.

this.tagInput.keydown(function(event) { // function of the library that checks every keydown event

         // my addition to check for Android keycode input:

                try {
                    var last_key_code_pressed;
                    this.addEventListener('textInput', function(e) {
                        var char = e.data;
                        var kc = char.charCodeAt(0);
                        last_key_code_pressed = kc;
                        console.log(kc); // works to output keycode here but not outside

                        return true;
                    });
                    console.warn(last_key_code_pressed);
                } catch(e) {
                    console.warn("error:" + e);
                }


        // need to get the keycode of the addEventListener HERE


        /* here are if-else-conditions to check if comma, 
        enter or space is pressed (code of the mentioned library) */

it is not possible to get the value outside of this function; although you can pass it to a different function. It's a matter of time; you have no idea when this event will be fired or wether it will ever be fired or how often it will be fired. So your JS won't wait till this happens, because waiting means freezing the whole page (in earlier times, the whole browser). That's what this callback is for, so you get notified as soon as an event happenned, and that you can execute code when this event happened. — Thomas, Apr 18 '17 at 14:15
I'm using TagIt (http://aehlke.github.io/tag-it/) and I'm trying to modify the code inside a function `this.tagInput.keydown(function(event) {` which checks if a comma or space has been pressed to seperate words into tags. I don't know how excatly to pass it to this function? Like I mentioned I just need to make this addition to recognize Android device keycodes. — AlexioVay, Apr 18 '17 at 14:20
[How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Thomas, Apr 18 '17 at 18:56

thedude · Answer 1 · 2017-04-18T14:22:02.540

3

This is of course not the only way, but you can assign the keyCode to a variable in the enclosing scope. You could also call a function from the event handler, passing it the keyCode and the storing it.

Example for the first approach:

var input_field = document.getElementById('photo-id');
var last_key_code_pressed;
input_field.addEventListener('textInput', function(e) {
    var char = e.data;
    var keyCode = char.charCodeAt(0);
    last_key_code_pressed = keyCode;

    return true;
});

Edit

a working example (using keydown event instead):

var input_field = document.getElementById('photo-id');
var last_key_code_pressed;
input_field.addEventListener('textInput', function(e) {
    var char = e.data;
    var keyCode = char.charCodeAt(0);
    last_key_code_pressed = keyCode;

    return true;
});

var button = document.getElementById('last-kc');
button.addEventListener('click', function() {
  console.log(last_key_code_pressed);
})

<input id="photo-id" />
<button id="last-kc" type="button">Last KeyCode</button>

edited Apr 18 '17 at 14:22

answered Apr 18 '17 at 13:52

thedude

9,388
1
29
30

I tried putting `console.log(last_key_code_pressed);` after that, but this says `undefined`. I mean outside of the function. – AlexioVay Apr 18 '17 at 14:05
Thanks, but like I said I need to use "textInput" instead of "keydown", because e.which doesn't work with Android devices. It always gives keycode `299`. Also with "textInput" it works to get the right keycode pressed on the Android device keyboard, but only inside the function. I need a way to pass it outside – AlexioVay Apr 18 '17 at 14:15
@Vay sorry that wasn't clear to me, updated my answer to use `textInput` event – thedude Apr 18 '17 at 14:22
Thank you again. This is so confusing to me, because I just need the keycode without pressing a button. Can you please see my edit of my question for further details? I'm already inside a `keydown` function and added the Listener inside of it, but I can't get the Android keycode. – AlexioVay Apr 18 '17 at 14:41
@Vay added the button just to illustrate the value is available. Without seeing the whole code in question it's hard to offer better advice. – thedude Apr 18 '17 at 14:43
Please take a look at my second edit. I appreciate taking time for this. – AlexioVay Apr 18 '17 at 14:52
@Vay it's not clear what the relationship between the `tagInput.keydown` event the and `textInput` event. Reading this code it seems your are add a `textInput` event listener for each keydown event fired on `tagInput`. – thedude Apr 18 '17 at 14:59
Maybe I put the listener at the wrong place. I'm not that experienced with JS. But the `tagInput.keydown` is the function that checks for keycodes and it works fine with browsers but not with Android devices. So I don't know where to put the listener and pass the keycode to that function. – AlexioVay Apr 18 '17 at 15:02

How to get the value inside addEventListener?

1 Answers1