ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

BubbleでEnterキーでSubmitをしないようにするには??

f:id:korokoro-vc:20200424182406p:plain

皆さんこんにちは! 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ではどのようにして制御するのでしょうか?

対応策1

対応策その1として、ボタンがhoverdされた時のみクリックできるようにします。

f:id:korokoro-vc:20200424153411j:plain

Appearanceの「This element isn't clickable」のチェックをしてください。

これでボタンにhoverされた時のみクリックされるようになり、Enterキー押下ではクリックされません。

ただし、スマホやタブレットではhoverが取れないので、PCのみこの方法は有用です。スマホやタブレットに関しては、このままだとクリックできなくなるので、 モバイルの場合は、常にクリック可能とする必要があります。
モバイルかどうかは、画面サイズで判定するか、「isMobile」というプラグインがあるので、これを利用すると判定できます。

対応策2

このアイディアは、bubble-camp2期のメンバーのアイデアです。

Inputにフォーカスがあたっていない時のみクリックできるようにする、というのも一つの対応策です。

f:id:korokoro-vc:20200424173605j:plain

これでInputでEnterキーを押下してもSubmitは発生しなくなります。

対応策3

もう一つの対応策として、ワークフローで登録処理をカスタムイベントで実行するようにすると、Enterキーで実行されません。

f:id:korokoro-vc:20200424174612j:plain

上図では、カスタムイベント「CreateData」でCreate a new thingを行っています。

明確な理由は分からず想像ですが、カスタムイベントにすると、直接submitではなくなるのかな?と思います。

逆に、Enterキーで実行したい場合があると、カスタムイベントが使えなくなってしまいますね。

まとめ

ちょっとしたことですが、ノーコードだと見えにくい部分です。
通常のHTMLだと、javascriptで対応とか色々ありますが。

Bubble側でキー操作を設定でできるようになったら良いですね。

是非参考にしてみてください。

ここまで読んでいただきありがとうございました!