Trigger button click using "Enter" key.

Ask the community
, ,
1

Hi there,

I’d like to let users submit forms using the “Enter” key, but I can’t seem to figure out how to get that to work. Help would be greatly appreciated.

Thanks in advance!

2

When the user hits the enter key they must be within an input as it will be triggered as a keyPress event, this is how it looks:

export function input_keyPress(event){
let key = event.key
if(key === 'Enter'){submitForm()}
}
3

This code only seems to work if the user does the following:

  1. The user fills in the form.
  2. The user clicks off the input box.
  3. The user clicks back on the input box and presses the Enter key.

It would be nice if the form can be submitted without the user having to click off the input box.

Any ideas on how to work around this?

4

Wix wont return the key otherwise

5

You shouldn’t need to click off the input box for it to work.

This code here works for a simple onKeyPress on a user input to show a hidden blue box (regardless of the value entered into the input itself).

export function input1_keyPress(event) {
if (event.key === "Enter") {
$w('#box1').show();
}
}

Preview before…


Preview after value added to input box and enter key on keyboard pressed…


(Note on this pic above you can still see the flashing cursor in the input which shows that I didn’t have to click off.)

6

Also for it to work with the submit button, then simply use the code from this old forum post from Brainstorrrm
https://www.wix.com/corvid/forum/community-discussion/submit-button-activated-pressing-enter

You can use something like this:

export function input1_keyPress(event) {
 console.log("You pressed" + event.key);
 if (event.key === "Enter") {
        button1();    // pressing <Enter> activates the button1() function ... same effect as clicking the button
    } else {
        //
    }
}

I think this will do what you intend to accomplish.