【Bubble】InputエレメントのEnterキーでのフォーム送信を防ぐ方法

2024年4月18日

著者：大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社：EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツールBubbleのInputエレメントのフォーカス時に、Enterキーでのフォーム送信を防止する方法をご紹介します！Inputフォーカス時にEnterキーを使う挙動の設定を編集することで、不要な送信を防止します。

たとえば、「キーワード検索フォーム」はEnterキーを押してそのまま検索処理が実行されるほうがユーザーフレンドリーですが、会員登録フォームでは入力途中に誤ってEnterを押したときにフォーム送信されると困るので使い分けできるようにしましょう。

Bubbleでは、エレメントのある項目にチェックを入れるか入れないかだけで設定できるので、ぜひこの記事で使い方を覚えちゃいましょう！

【日本最大級のノーコード開発実績】
無料でアプリ・システム開発の相談を受付中

InputエレメントのEnterキーによるフォーム送信を防ぐ方法

結論。InputエレメントのAppearanceタブ内の「Prevent “enter” key from submitting」欄にチェックをつけると、入力中にEnterを押してもフォームが送信されないように設定できます！

ちなみに、Prevent "enter" key from submittingは日本語で「Enterキーによるフォーム送信を防ぐ」といった感じの意味です。

実装は以上。今回の記事がバブラーのみなさんの開発の助けになれば幸いです！

「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！