皆さんこんにちは！ Bubbleでノーコードライフ楽しんでいますか？
今回は、Bubbleで、Input時のEnterキーをクリックした時の処理についてお話しようと思います。
InputとEnterキー
HTMLの仕様として、Input内でEnterキーを押下すると、そのままSubmit処理が行われます。
input type="submit"や、button type="submit" が使われているときです。
※入力項目が一つの場合は、type="button"でも発生するようです。
Bubbleでも例にもれず、Input内でEnterキーを押下すると、ボタンのクリックイベントが発生します。
Enterで実行するのは一見便利かと思います。例えば検索のときとか。ボタンをクリックする動作を省けるので。
しかし、登録の時はどうでしょうか？Enterキーを複数回クリックし、意図せずに登録処理・更新処理が行われることが発生してしまいます。
Webアプリのあるあるだと思いますが、このような時、EnterでSubmitしないようにJavascriptで制御することってよくありますよね。
ではBubbleではどのようにして制御するのでしょうか？
対応策１
対応策その１として、ボタンがhoverdされた時のみクリックできるようにします。
Appearanceの「This element isn't clickable」のチェックをしてください。
これでボタンにhoverされた時のみクリックされるようになり、Enterキー押下ではクリックされません。
ただし、スマホやタブレットではhoverが取れないので、PCのみこの方法は有用です。スマホやタブレットに関しては、このままだとクリックできなくなるので、
モバイルの場合は、常にクリック可能とする必要があります。
モバイルかどうかは、画面サイズで判定するか、「isMobile」というプラグインがあるので、これを利用すると判定できます。
対応策２
このアイディアは、bubble-camp2期のメンバーのアイデアです。
Inputにフォーカスがあたっていない時のみクリックできるようにする、というのも一つの対応策です。
これでInputでEnterキーを押下してもSubmitは発生しなくなります。
対応策３
もう一つの対応策として、ワークフローで登録処理をカスタムイベントで実行するようにすると、Enterキーで実行されません。
上図では、カスタムイベント「CreateData」でCreate a new thingを行っています。
明確な理由は分からず想像ですが、カスタムイベントにすると、直接submitではなくなるのかな？と思います。
逆に、Enterキーで実行したい場合があると、カスタムイベントが使えなくなってしまいますね。
まとめ
ちょっとしたことですが、ノーコードだと見えにくい部分です。
通常のHTMLだと、javascriptで対応とか色々ありますが。
Bubble側でキー操作を設定でできるようになったら良いですね。
是非参考にしてみてください。
ここまで読んでいただきありがとうございました！
