JavaScriptで入力フォームの文字数チェックをする方法を現役エンジニアが解説【初心者向け】

JavaScriptで入力フォームの文字数チェックをする方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

 

入力フォームとは

入力フォームとは、webサイトにおいて情報を入力して送信するための画面のことを指します。
サイトに登録する際の登録、ログイン画面やお問い合わせフォーム、検索窓など様々なシーンで使用されています。

Webサイトを作る際には必須の項目です。

入力フォームには、様々な種類があります。
テキストの入力をするテキストボックス、複数の項目から選択をするセレクトボックス、ラジオボタン、
チェックボックスなどはよく使用されるので、どうやってHTMLでどうやって書くのかを抑えておくと良いでしょう。

 

JavaScriptで入力フォームの文字数チェックをする方法

JavaScriptで入力フォームの文字数を確認する方法はいくつかあります。
簡単な方法は、inputタグをgetElementByIdで取得して、inputタグに入力された文字数をカウントする方法でしょう。

JavaScriptでは、タグをidで取得しそのタグの中身のテキストやプロパティを取得できます。
以下の方法でidを使ってタグを取得できます。
 

document.getElementById(id名)

 
また、タグのプロパティには.で繋ぐことでアクセスできます。
 

DOM要素.プロパティ名

 
文字数のカウントはJavaScriptのlengthメソッドを使用して、数えられます。
 

文字列.length

 
上記の三つを使うことで以下のように、文字数を取得できます。
 

var input = document.getElementById(id名)
var count = input.value.length
console.log(count)

 

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。

今回は、文字入力に応じて文字数のカウンターを出す処理を書いてみます。
先ほどの方法で、idからDOMを取得し文字列の長さを出し、それを別の要素に書き出してみましょう。
文字数はkeyupイベント(キーボードを押し終わった時に発動するイベント)を拾って、更新します。

まずは以下のようにinputタグで入力フォームを作成します。
 

<label for="sampleForm">Sample Form</label>
<br />
<input type="text" id="sampleForm" />
<p><span id="inputCounter">0</span>文字</p>

 

次に以下のようにJavaScriptを書いて、文字の取得、カウント、要素の更新を行います。
addEventListenerでkeyupを指定することで、キーが上がった時に文字数が更新されます。
 

var input = document.getElementById("sampleForm");
var span = document.getElementById("inputCounter");
input.addEventListener("keyup", function() {
  span.textContent = input.value.length;
});

 

以上で解説を終わります。

 

筆者プロフィール

この記事を監修してくれた方 メンター金成さん。 2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。 現在も、開発案件に携わりながら、日々勉強中。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。