#Pressing Enter with JavaScript

41 messages · Page 1 of 1 (latest)

clear linden
#

There is a site in which if you press Enter (anywhere in the DOM) a textbox will appear. If you press Enter again (anywhere in the DOM, could be at the top of the page or could be inside that textbox) a message will be sent.

I'm trying to replicate the physical Enter function with a virtual one, which will happen only when i click a button that I created named 'Enter'.
So basically I wanna replicate the physical Enter function whenever I click the "Enter" button created. With this way I hope the message will be sent.

With the code I provided, the first time I click on the button nothing happens. The second time, it logs in the console "Enter has been pressed". If I have something written in that textbox and I click the button though, the message isn't being sent. I could really use some help here.

code.png
#

there is a JavaScript limitation that I am not aware?

wet token
#

you don't see it the first time because you don't add the event listener until after you dispatch the event.

#

the site almost-certainly does not have the event listener on that input. you're likely dispatching to the wrong element

#

yes, there are restrictions with keyboard events. not sure if that's what's going on though

clear linden
#

it's basically like this one, but instead of #message.form-control it's #messageBox.form-control

box.png
wet token
#

you're misunderstanding my comment.

clear linden
wet token
#

you say the message box appears when you press enter, so it's not the element listening for enter

#

the event listener is likely on document or something else much higher up the stack

clear linden
#

oh, I hadn't thought about this

#

I changed it to "document.addEventListener" but still nothing happens (except the console log of course)

verbal compass
#

Why is the listener in a timeout?

wet token
#

just their dummy listener. they're trying to use one from code they didn't write.

clear linden
wet token
#

that doesn't answer the question

clear linden
#

sorry, I don't think I understand the question then

wet token
#

you're adding your own event listener in the wrong place

#

(but it doesn't really matter since you are trying to use somebody elses)

clear linden
wet token
#

the event listener is not on that textbox. you proved that already. (but yes)

verbal compass
#

There is a listener on #messageBox already, before your code runs?

wet token
#

there's a listener, but they don't know what element it's attached to

verbal compass
#

Okay, but on something where the event can be captured/bubbled

clear linden
wet token
#

your guess is as good as mine 😉

verbal compass
clear linden
#

alright, thanks for the help guys. Now I know where I'm gonna have to look

verbal compass
#

If you want to simulate the enter press on the click of enterButton you can directly dispatch the keypress event you created

clear linden
#

so just this "dispatchEvent(event1)", right?

verbal compass
#

dispatch it on an element that works

#

People put the listener on window, document, body, a main element. There is no standard way

clear linden
#

the upper I go, the more certain it is that it will get triggered?

verbal compass
#

No

#

it's up to the will of the developer

clear linden
#

but if I send an event in the window, won't this be triggered for all the elements that are under it?

verbal compass
#

There are 2 possibilities. Bubbling goes up (so you can't bubble above window), capturing goes down (so you can't capture under the innermost element)

#

So if you dispatch on window and it's a bubbling listener on document, you won't have it

clear linden
#

this might be a stupid question, but shouldn't I go in the code of the page and find the event that it's being triggered when the physical Enter has been pressed and dispatch it when I click the button? Or I can still find a way to dispatch the "virtual" Enter and this will automatically call the event that is being dispatched when I press the physical Enter key?

wet token
#

if you have access to the code, yes you should use it to determine what element is listening for the enter event. manually triggering the event should trigger the event handler that's already in place, as long as you use the right element. it's possible they ignore untrusted events, though.