【Bubble】リアルタイムにInputエレメントの入力文字数を表示する方法

2024年4月6日

ノーコードツールBubbleで、Inputエレメントに入力された文字数をリアルタイムで数え、Textエレメントへ表示する簡単な方法をご紹介。

以下に当てはまる方の参考になると思います。ぜひご覧ください〜！

アプリ・システム開発費用が1/3に！
＼実績日本最大級のノーコード開発サービス／

ざっくりの課題でも
プロが無料で提案

実装イメージ

Inputエレメントに文字数制限を設けている場合に、フォーム直下に現在入力されている文字数と最大文字数を表示してあげると直感的に分かりやすくて親切ですよね。

この記事で紹介する方法を実践すればサクッと実装できます！ぜひお試しくださいませ。

ちなみに、実装イメージ動画のサンプルのエレメントツリーは以下の通り。こちらも参考になれば幸いです。

アプリ・システム開発費用が1/3に！
＼実績日本最大級のノーコード開発サービス／

結論。BubbleでInputエレメントに打ち込まれた文字数を数えるには、「:number of characters」を使います！

文字数をカウントしたいInputエレメントのvalueの後ろに「:number of characters」をつけてあげればOKです。

サンプルではInputタイトルの文字数を数えたかったので、添付画像のように設定してます。

以上です。とても簡単なのでぜひトライしてみてください〜！ありがとうございました！

当社はノーコード開発において日本最大級の実績を誇り、最安30万円、最短2週間という業界トップクラスのスピードと価格でサービスを提供しています。

他社との決定的な違いは、複数のノーコードツールに対応していること。お客様の要件に最適なツールを選択することで、開発期間の短縮と費用削減を同時に実現します。

さらに、アプリ//システム開発だけでなく、マーケティング支援まで一貫して対応可能。「良いアプリを作ったが、ユーザーが集まらない」という課題を解決するため、集客戦略の立案から実行まで包括的にサポートいたします。

特にMVP開発から本格運用まで段階的に進めたい企業様は、ぜひご相談ください。

日本最大級のノーコード開発実績を誇り、大手ノーコードツールであるBubbleの公式代理店にも認定されているEPICs株式会社の開発チーム。