Javascript "addEventListener" not working

MIT App Inventor Help
1

This is my js code in the AI2 webviewer.

document.getElementById('input').focus();
document.getElementById('input').addEventListener ('keyup', (evt) => {
	evt.key === "Enter"
        alert ("Bingo!")
});

image
My intention is to check a key pressed with keyboard.
Why isnt it working in AI2? With html script it is working.

2

Seems running that js outside of the webpage is not giving focus or therefore running the key event.

Test in your browser pumping the console with the two commands.

I believe this is by design to prevent webpages being hijacked by this particular external scripting

Works in computer browser if you use a setTimeout function:

setTimeout(function() {
document.getElementById('input').focus();
document.getElementById('input').addEventListener ('keyup', (evt) => {
	evt.key === "Enter"
        alert ("Bingo!")
});
}, 9000);

Paste into console, hit Enter, then exit Developer. after the timeout has elapsed you should see the element get focus, and hitting Enter returns the alert.

3

What version of Android are you running? Older versions used a separate web view implementation that may not support features like arrow functions. I will also point out that your code doesn't include an if statement, so it's simply check that evt.key === "Enter", then show the alert. The alert will fire on every key press.

4

Tested using companion on Android 13 and 16, not actioning focus.

This works:

image

but you have to touch the webviewer ... "to give the webviewer focus"

need to go off and remind myself what the function syntax (instead of =>) would look like.

5

Got it working:

image
image726×210 23.4 KB

Process

  1. Load app
  2. Select webviewer (give focus)
  3. Click Button to run the javascript
  4. Press "Enter" to see alert

Above tested in Emulator using computer keyboard, things are different on a phone/device, and you need to use Android keycodes. However, the "Enter" key on an Android soft keyboard on my phone does not want to respond. For initial testing I used the spacebar:

image
(or you can use KEYCODE_62)

All keycodes to play with, look here:

https://developer.android.com/reference/android/view/KeyEvent

6

I'm using Android 12 and companion 2.76, i will try the if statement later when the script is running

7

TIMAI2 i will try your code, is it always better to join the JS code from several text strings?
I write complete JS code in one text string instead of five.

8

I do that so that you can see all the code, otherwise most of it is lost in the blocks image and you have to then copy and paste the code again to the community.

9

Anyone know the Android keycode for this:

image

This is how my soft keyboard displays when in an editable textbox in an html page in the webviewer. Sometimes it has no vertical bar to the right of the arrow.

10

It's not tab (\t)?

11

It is not: KEYCODE_TAB or KEYCODE_61 or Tab, well not here...

12

Can i also send keypress event like this?

 document.getElementById('input').focus();
 var event = document.getElementById('input').createEvent('Event');
 event.initEvent('keydown', true, true);
 event.keyCode === 62; 
 document.getElementById('input').dispatchEvent(event);