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

2024年4月7日

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

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

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

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

無料で資料をダウンロード

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

実装イメージ

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

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

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

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

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

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

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

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