JavaScriptのテキストエリアで文字数制限をする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのテキストエリアで文字数制限をする方法について現役エンジニアが解説しています。文字数を制限するには、テキストエリアの状態を監視して変化があれば、文字数を取得して判定を行う方法があります。文字数をオーバーしていたらアラートを表示させる方法を解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのテキストエリアで文字数制限をする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をご覧ください。

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでの戻るボタンの操作方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

 

文字数制限の目的

文字数制限の目的はメールアドレスや電話番号、性別や氏名など個人情報の入力フォーム作成の際、入力ミスや目的の情報以外の入力を防ぐことです。

 

JavaScriptのテキストエリアで文字数制限をする方法

具体的にテキストエリアで入力文字数制限をする方法を見ていきましょう。

  1. テキストエリアを変化させたら(入力があったら)チェックを行う関数を用意する。
  2. 関数内でテキストエリアの値を取得する。
  3. 文字列の文字数を取得する。
  4. 最後にその文字数が制限文字数以上だった場合、アラートを実行。

これでJavaScriptによる文字数制限を可能となります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際のコードをみていきましょう。

<html>
<head>
<title>JavaScript</title>
<script>
function check()
{
    //②次にその関数内でテキストエリアの値を取得。
    txt = document.form1.text1.value;
    //③その後、その文字列の文字数を取得。
    n = txt.length;
    //④最後にその文字数が制限文字数以上だった場合、アラートを実行。
    if (n > 10) alert("10文字以内で入力してください");
}
</script>
</head>
<body>
<form name="form1">
<!--①まずテキストエリアを変化させたら(入力があったら)チェックを行う関数を用意します。-->
<textarea rows="3" name="text1" onChange="check()"></textarea>
</form>
</body>
</html>

JavaScriptでテキストエリアの文字数を制限する方法のサンプル画像

これで入力された文字数が制限値以上となった場合、アラートを実行するように設定できました。

まとめ

JavaScriptで文字数制限を行うコードについて解説しました。

JavaScript以外にもHTMLタグで制御する方法などもあるため、場合により使い分けてみましょう。

 

執筆してくれたメンター

メンターTK

大学院でVBAを扱う研究を行い、プログラミングの素晴らしさに目覚める。

その後、建設系企業のシステム担当として従事。JavaScriptやPHP、Processingなどに没頭中。

 

大石ゆかり

JavaScriptのテキストエリアで文字数制限をする方法がよくわかったので良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

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

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。