jQuery、文字をカウントする

文字カウント機能は、入力文字数を制限する場面や、ユーザーに文字数のリアルタイムなフィードバックを提供する際に使われます。

例えば、SNS投稿やコメント欄の制限文字数を超えないようにする、フォーム入力での字数制限を守る、またはSEO対策としてメタデータや説明文の文字数を管理する場合などです。この機能はユーザーエクスペリエンスを向上させ、入力エラーの防止や適切な情報量の提供を助けます。

色んな文字カウント機能

色んな文字カウント機能

キーから離れたら発火、文字数入力

ユーザーが入力操作を行い、キーボードから手をはなすと文字数がカウントされます。

See the Pen jQuery、文字カウント1 by sho-ta (@sho-ta) on CodePen.

キーボード入力、ペーストで発火、文字数入力

前のコードは、キーボードから手を離した時に、イベントが発火します。今度は貼り付け、ペーストした時に文字数をカウントできるようにします。

See the Pen jQuery、文字カウント2 by sho-ta (@sho-ta) on CodePen.

空白、改行はカウントしない

タイトルの通りですが、純粋に文字数のみをカウントしたい時に便利です。

See the Pen jQuery、文字カウント3 by sho-ta (@sho-ta) on CodePen.

文字数を制限する

文字数のカウントと多少お題はずれますが、文字入力の制限機能です。

See the Pen jQuery、文字カウント4 by sho-ta (@sho-ta) on CodePen.

この記事では、jQueryを使って文字カウント機能を実装する方法について解説します。文字カウント機能は、SNSの投稿フォームやコメント欄、SEO対策でのメタデータ管理など、多くの場面で役立ちます。文字数の制限やフィードバックをリアルタイムに提供することで、ユーザーエクスペリエンスを向上させ、誤入力を防ぐことができます。

ここでは、いくつかのステップに分けて具体的な実装方法を紹介します。

キーから手を離した時に文字数をカウント

まずは、ユーザーがキーボードから手を離した時に文字数をカウントする基本的な機能を実装します。keyupイベントを使い、文字入力のたびに文字数を表示する仕組みです。

コード例

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字カウント機能</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <textarea id="inputText" rows="5" cols="40"></textarea>
  <p>文字数: <span id="charCount">0</span></p>

  <script>
    $(document).ready(function() {
      $('#inputText').on('keyup', function() {
        const textLength = $(this).val().length;
        $('#charCount').text(textLength);
      });
    });
  </script>
</body>
</html>

HTML

解説

keyupイベント: ユーザーがキーボードから手を離した時に発火し、テキストの長さを取得します。
$(this).val().length: テキストエリア内の文字数を取得し、charCountに表示しています。

この基本的な機能は、リアルタイムでユーザーにフィードバックを提供する際に有効です。

キーボード入力だけでなく、ペーストにも対応

次に、キーボードからの入力だけでなく、コピー＆ペーストにも対応するようにします。keyupイベントだけでは、ペースト操作で文字数が反映されないため、inputイベントも追加します。

コード例

<script>
  $(document).ready(function() {
    $('#inputText').on('input', function() {
      const textLength = $(this).val().length;
      $('#charCount').text(textLength);
    });
  });
</script>

JavaScript

解説

inputイベント: keyupよりも柔軟で、テキスト入力やペーストなど、あらゆるテキストの変更に対応します。これにより、ペースト操作でも文字数がカウントされるようになります。

空白や改行を除外して文字数をカウント

時には、空白や改行を無視して純粋な文字数のみをカウントしたい場合もあります。この場合、正規表現を使って不要な文字を除外します。

コード例

<script>
  $(document).ready(function() {
    $('#inputText').on('input', function() {
      const textLength = $(this).val().replace(/\s+/g, '').length;
      $('#charCount').text(textLength);
    });
  });
</script>

JavaScript

解説

replace(/\s+/g, ”): 正規表現を使い、全ての空白文字（スペース、タブ、改行など）を削除してから文字数をカウントします。
この方法により、純粋なテキストの文字数のみが表示されます。

文字数の制限を設ける

文字数の上限を設定して、ユーザーが一定の文字数を超えないようにすることも重要です。ここでは、テキストエリアに最大文字数の制限を設ける方法を紹介します。

コード例

<script>
  $(document).ready(function() {
    const maxLength = 100;
    $('#inputText').on('input', function() {
      const textLength = $(this).val().length;
      const remaining = maxLength - textLength;
      $('#charCount').text(textLength);

      if (remaining < 0) {
        $(this).val($(this).val().substring(0, maxLength));
      }
    });
  });
</script>