[Web development] Enter keypress inside input causing form submit

User experience/business issues caused by implicit submission triggered by incorrect Chinese and Japanese input

Scene reproduction

When testing the input form I wrote, I suddenly discovered a problem. When an input box is in the focus state, if the user accidentally touches the Enter key, the form submission event will be triggered, causing the entire form input to be unknowingly. The situation ended unexpectedly. This situation is very likely to happen in the case of Chinese and Japanese input. The main reasons are as follows:

• For Chinese and Japanese input methods, it is possible to select and end the input with the enter key
• Some users have the habit of pressing the Enter key multiple times.
  Therefore, it is necessary to avoid this accidental submission event. If the input ends unexpectedly, wrong data and wrong results may be produced.

solution

To avoid such accidental submissions, it is actually very convenient. Register a onkeypresslistener event on the form element or the ancestor element of the form element :

<section onkeypress={preventSubmit}>
	<lightning-record-edit-form>
		<!-- fields -->
	</lightning-record-edit-form>
</section>

In the JS file, implement the preventSubmitfunction:

preventSubmit(event) {
    
    
    if (event.keyCode === 13) {
    
    
        event.preventDefault()
        return false
    }
}

Now, after the carriage return event bubbling in the input box is captured, our preventSubmitfunction will prevent the form from being submitted.

Discuss in-depth

In fact, implicit submission is a long-established rule on the Internet, and the function of pressing Enter to trigger the implicit submission is actually not recommended to be blocked or cancelled. Reasons include but are not limited to:

• In the design of some websites, the submit button is subjectively/incorrectly hidden, and there is no other way except implicit submission
• The way of submitting by carriage return is a simple and fast way to submit, it can save the process of finding the submit button
• Many users have acquiesced that carriage return is a feasible way to submit

Regarding the discussion of the carriage return submission form, this article is very comprehensive.
However, in the Chinese and Japanese environment, unlike the English environment, there is a possibility that the enter key will be touched by mistake.
Therefore, it is necessary to determine whether to handle this implicit submission event.
If you are in a personal project, I highly recommend that you follow the implicit submission convention of web development and don’t block its submission;
if it is an enterprise web application, for the correct data and a good user experience, judge according to the user’s habits and requirements Do you want to disable this implicit submission event?