Javascriptでformの入力欄の文字数をカウントする方法

Javascriptでformの入力欄の文字数をカウントする方法

コンテンツを登録・更新できる機能、俗に言うCMS。
ウェブサイトの制作をしていれば、構築することの多い機能でしょう。

そのCMSを利用するのはウェブの知識が豊かな人ばかりではないため、コンテンツの登録画面は利用しやすいようにしてあげなければなりません。

そこで付加機能として喜ばれることが多いのが、formの入力欄に入力した文字数をリアルタイムに表示する機能
メタディスクリプションの入力など、文字数の目安が必要な項目で重宝します。

Javascriptを一行追加するだけで、input要素やtextarea要素に入力された文字を簡単にカウントできますよ。

textareaやinput[type=”text”]に入力された文字をjsを使ってカウントする

CMSはその機能を利用するのが自分ではない誰か、エンドユーザやクライアントだったりした場合、管理画面にはコンテンツが管理しやすいように様々な機能が必要になってきます。

そこで今回の機能。

Javascriptでformの入力欄の文字数をカウントする方法

こういったtextareaなどの欄に入力された文字をカウントする機能です。

Javascriptでformの入力欄の文字数をカウントする方法

実際にはこのような動きになります。
“○○文字制限”など制限を設けた場合にも、入力した文字が何文字かわからないとやりづらいですからね。

フォームに入力した文字数をリアルタイム表示する手順

さて、実際の手順ですが、Javascriptは1行で済んじゃいます。

まずはカウント数を取得したいtextareaやinput[type=”text”]に、下記コードを追加します。

getElementByIdで指定するIDは、文字数を表示したい要素につけるIDを入力します。
例としては、下記のようにします。

すると、Javascriptを追加した要素の欄に入力をした段階で、出力先に文字数が表示されます。

コードをまとめると、下記のようになります。

まとめ

フォームの入力欄には文字数制限を設けることが多いですよね。
ユーザに文字数を数えながら入力させるのは手間でしかありません。そんな時に使えるのが今回の機能です。

簡単に実装できるので、ぜひお試しください!

筆者について

筆者について


1982年、東京下町生まれ。
高校卒業後、アメリカへ留学。その後、「アートが根付いた国では絵だけで食えるのか」を確認するため、ドイツベルリンにてアート活動をおこなう。

日本に戻ってからは、コーディング・オーサリング・プログラミングなんかを経て、ウェブディレクターを肩書きにしておりました。現在は独立し、ブログやサイトの運用を軸に、ウェブサイトの企画提案からデザイン・構築まで手広く活動しております。何でも屋です。
制作のご依頼はお問い合わせフォームよりお願いします。

isLog〜イズログ〜では『日々生きること自体が旅』をモットーに、日々の旅を中心に綴っています。

詳しいプロフィールはこちら


feedly

コメントを残す

*