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」のチェックの有無によって変更することができます。

関連記事

SPA
StripeConnectについて
@未完成@初期設定
@未完成@パフォーマンス
SPA
SPAガイド
@未完成@パフォーマンス
保守性
保守性高く開発するガイド
bottom of page