HTMLでテキストボックスの文字数カウントが簡単！5ステップで完璧に理解する方法

はじめに
●HTMLでテキストボックスのカウント方法を初心者にもわかりやすく解説
まとめ

はじめに

この記事を読めば、HTMLでテキストボックスの文字数をカウントする方法が簡単にできるようになります。

初心者の方でもわかりやすく、面白い内容で解説していきますので、ぜひお楽しみください。

●HTMLでテキストボックスのカウント方法を初心者にもわかりやすく解説

HTMLでテキストボックスの文字数をカウントする方法は、意外と簡単です。

この記事では、初心者の方でもできる5つのステップを詳しく解説していきます。

各ステップにはサンプルコードも付いているので、実際に試しながら学んでいきましょう。

○ステップ1：テキストボックスを作成する

まずは、HTMLでテキストボックスを作成しましょう。

次のようなコードで簡単に作成できます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>テキストボックスのカウント</title>
</head>
<body>
  <label for="text">テキストボックス：</label>
  <input type="text" id="text">
  <p>文字数：<span id="count">0</span></p>
</body>
</html>

このコードでは、<input type="text" id="text">でテキストボックスを作成しています。

また、文字数を表示するための<span id="count">タグも用意しています。

○ステップ2：JavaScriptで文字数をカウントする関数を作成する

次に、JavaScriptで文字数をカウントする関数を作成しましょう。

次のようなコードを追加して、テキストボックスの文字数をカウントできるようにしましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>テキストボックスのカウント</title>
  <script>
    function countCharacters() {
      const textBox = document.getElementById("text");
      const countElement = document.getElementById("count");
      countElement.innerHTML = textBox.value.length;
    }
  </script>
</head>
<body>
  <label for="text">テキストボックス：</label>
  <input type="text" id="text" oninput="countCharacters()">
  <p>文字数：<span id="count">0</span></p>
</body>
</html>

このコードでは、countCharacters()関数を作成して、テキストボックスの文字数をカウントしています。

oninput="countCharacters()"を<input>タグに追加することで、テキストボックスに入力があるたびに関数が呼び出されます。

○ステップ3：注意点を押さえる

テキストボックスの文字数カウントにはいくつか注意点があります。

例えば、全角文字や改行文字も1文字としてカウントされるため、実際の文字数と異なる場合があります。

また、入力された文字をそのまま表示すると、XSS(クロスサイトスクリプティング)の脆弱性が生じることがあります。

これらの問題に対処するために、次のように改良したコードを試してみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>テキストボックスのカウント</title>
  <script>
    function countCharacters() {
      const textBox = document.getElementById("text");
      const countElement = document.getElementById("count");
      const inputText = textBox.value.replace(/\r\n|\r|\n/g, "\n");
      countElement.textContent = inputText.length;
    }
  </script>
</head>
<body>
  <label for="text">テキストボックス：</label>
  <input type="text" id="text" oninput="countCharacters()">
  <p>文字数：<span id="count">0</span></p>
</body>
</html>

このコードでは、replace()を使って改行文字を統一し、textContentを使ってXSS対策を行っています。

○ステップ4：カスタマイズしてみる

さらに、テキストボックスのカウント機能をカスタマイズしてみましょう。

例えば、次のようにCSSを追加して、文字数が一定以上になったときに警告文を表示することができます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>テキストボックスのカウント</title>
  <style>
    .warning {
      color: red;
      display: none;
    }
  </style>
  <script>
    function countCharacters() {
      const textBox = document.getElementById("text");
      const countElement = document.getElementById("count");
      const warningElement = document.getElementById("warning");
      const inputText = textBox.value.replace(/\r\n|\r|\n/g, "\n");
      const count = inputText.length;

      countElement.textContent = count;

      if (count > 10) {
        warningElement.style.display = "block";
      } else {
        warningElement.style.display = "none";
      }
    }
  </script>
</head>
<body>
  <label for="text">テキストボックス：</label>
  <input type="text" id="text" oninput="countCharacters()">
  <p>文字数：<span id="count">0</span></p>
  <p id="warning" class="warning">文字数が10文字を超えています！</p>
</body>
</html>

このコードでは、文字数が10文字を超えると、警告文が表示されるようになっています。

warningElement.style.displayを使って、警告文の表示・非表示を切り替えています。

○ステップ5：応用例としてタグ付け機能を追加する

最後に、応用例としてタグ付け機能を追加してみましょう。

次のようなコードを使って、入力された文字をタグとして表示できます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>テキストボックスのカウント＆タグ付け</title>
  <style>
    .tag {
      display: inline-block;
      padding: 2px 8px;
      background-color: #f0f0f0;
      border-radius: 4px;
      margin: 2px;
    }
  </style>
  <script>
    function countCharacters() {
      // (前述のcountCharacters関数のコードをここにコピー)

      // タグ付け機能
      if (count >= 5) {
        const tagsElement = document.getElementById("tags");
        const tagElement = document.createElement("span");
        tagElement.className = "tag";
        tagElement.textContent = inputText.substring(0, 5);
        tagsElement.appendChild(tagElement);
        textBox.value = "";
      }
    }
  </script>
</head>
<body>
  <label for="text">テキストボックス：</label>
  <input type="text" id="text" oninput="countCharacters()">
  <p>文字数：<span id="count">0</span></p>
  <p id="warning" class="warning">文字数が10文字を超えています！</p>
  <div id="tags"></div>
</body>
</html>

このコードでは、テキストボックスの入力内容が5文字以上になると、タグとして表示されるようになっています。

countCharacters()関数内で、createElement()を使って新しいタグ要素を作成し、textContentに入力文字列の先頭5文字を設定しています。

そして、appendChild()を使って、タグ要素を追加しています。