Please do not implement Enter key to Submit behaviors by directly hooking into the raw keypress event. 🙏🏻

Last Updated: Oct 05, 2023

Setting the Enter key as a send trigger can make it challenging for Japanese users utilizing Safari to use the form. In Japanese, users compose text using the Enter key to convert into Kanji. If the Enter key is set as the send trigger, the text might be submitted prematurely.

This issue is currently prevalent in many web applications abroad. Regrettably, solutions are not being actively implemented, and products with similar problems continue to be produced daily.

Chrome ✅

Safari 🚫

If you have difficulty understanding the problem even after watching the video, imagine a situation where "the space key acts as a send trigger." It's like when you try to type "I am Taro", and just after typing "I", it gets sent.

To Reproduce

  1. Enable Japanese input from the Mac settings.
  2. Launch this page in Safari.
  3. In the form below, type watasi using the Japanese keyboard, and when the conversion balloon appears, press enter.
  4. The text will be submitted.

Suggested remedy

When there is only one input field, using implicit submission simplifies the solution.

For text areas, the solution is to use keyCode. Although it is marked as deprecated, it is currently the only effective approach.

Lastly, these issues would be resolved if Safari handled isComposing properly. Upon completion of the conversion, isComposing becomes false, and then the Enter event is processed, resulting in submission during the conversion.

Many Japanese users agree with this sentiment.

Star

Thank you for everyone's support. If you have a better approach or any questions, please join the discussion!

Related Links

Author

I am not familiar with English, so this text was primarily composed using ChatGPT. I apologize if it's difficult to read. If you find any expressions that seem off, please provide feedback!🙏🏻

Petition Form

Image