On Keypress/Enter pressed?

Ask us anything How do I?
1

How can I attach an onKeyPressed or onEnterKeyPress event to text boxes/inputs?
I don’t see either of those as Work Flow actions.
I do see onChange and onInitChange, which are not exactly the same and you would still have to capture the Enter key.

2

Hey @peteletkemansst, @dorilama sold me a custom component that allowed me to do this. Not sure if he would be open to selling it to you as well. As far as I know, there’s no native way to do this in WeWeb

3

The form element let you do thing on submit, which can be trigger by pressing enter in an input element.

4

This is a good quick solution if you want to test simple logic.
I used this trick for the proof of concept of a notion style form builder

There are some limitations with this approach:

  • It works only in text inputs and not in textarea (long answer input) because textarea are multiline and do not trigger a submit with enter key.
  • you lose the actual submit trigger in your form, because if you execute the logic for enter key on the submit trigger you can’t submit the form with the same trigger because you don’t know if the submission was from the enter key or a button click. So now you have to put the submit logic in a button click and lose automatic validation. In x time when you need to come back to the app it can be misleading to have the submission logic in the button because you are not following the best practices, so long term maintenence/hand over of the app can be an issue.
  • you can not override the behaviour of the key pressed. For example if you are in a textarea and you want the enter key to add another element you will end up also with the newline in the textarea because you are not preventing the default behaviour
  • in some very specific, and rare, cases you may want to “hide” the key press event from other global listeners
5

I found a solution by adding the form element
image

Then I added the inputs I wanted inside and changed the button type to submit button
image

Then, in the form container you add a workflow like this
image

image

This way you can create a fully custom form with your own inputs and button that it will trigger on keyboard ‘enter’ key.