top of page
《Bubble》Enter入力時の制御の実装方法
概要
今回は「Enter」による処理について解説していきます。
使用例として、ログイン画面でメールアドレスとパスワードを入力した後、ログインするためのボタンではなくEnterを押すだけでログイン処理が行われるなど、入力フォームと紐づけられたエレメントのワークフローがEnterによって行われるようになります。
Enter入力時の制御の実装方法
Enter入力時の制御方法
以下のようにInputとButtonで作成した簡易的なログインシステムを例として解説していきます。
基本的なログインシステムは以下のようにInputに入力された情報をもとにログインボタンを押すことでログイン処理を行います。
このログイン処理で紐づけられているInputの情報を見たときに「Prevent"enter"key from submitting」という項目があり、この項目のチェックを外すことでInputが用いられている処理(この場合ログイン処理)がEnterを押すことで行われるようになります。
⚠️デフォルトでチェックが外れておりEnterによる処理ができるようになっているため、Enterによる処理をしたくない場合にチェックをつけるようにします。
処理に紐づいているInputであれば、どのInputでチェックをつけてもEnterによる処理はできなくなります。
まとめ
Enterによる処理は「Prevent"enter"key from submitting」のチェックの有無によって変更することができます。
bottom of page