sugulogの日記

JavaScriptの文字数カウント機能。フォームに入力された文字数をビューに表示しよう。

スポンサードリンク

f:id:sugulog:20210124163220p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、フォームに入力された文字数をビューに表示しようということで

について簡単に解説します!!

その為このブログを読むことで、文字数カウント機能について理解が深まるのはもちろん、実装できるようにもなります。

是非最後までご愛読ください。

 

今回は、

  • 文字数カウント機能の実装

の順で解説していきます。

では早速、みていきましょう!!

・文字数カウント機能の実装

 まず始めにHTMLで入力フォームと文字数表示箇所を作成しています。

f:id:sugulog:20210124142848p:plain

またCSSで入力フォームを少し整えておきます。

f:id:sugulog:20210124142950p:plain

では最後にJavaScriptの記述です。

f:id:sugulog:20210124144707p:plain

keyupイベントを使うことでテキストを入力する際にキーボードのキーを離した際に処理を実行することができ、今回は関数stringNumberを実行しています。

関数stringNumberでは入力フォームに対しvalueメソッドを使用することで、入力された内容を取得しlengthメソッドで入力された内容の文字数を取得しています。

後は取得した文字数を表示したい箇所に反映させれば完成です。

f:id:sugulog:20210124150027g:plain

動的にビュー側で文字数がカウントされているのが確認できます。

 

以上、今回のブログでした。

文字数カウント機能について理解が深まり、実装できるようにもなりましたか??

文字数カウント機能は様々なSNSでも利用されている機能です。

自分の知識としてしっかり蓄えていきましょう。

今回のToDo

文字数カウント機能を実装してみましょう(≧∀≦)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度読者登録お願いします!

最後までご愛読いただきありがとうございました!!