JavaScriptの基本！jQueryでテキストボックスの入力文字数を取得する方法を徹底解説

2024-06-20

jQueryを使ってテキストボックスの入力文字数を取得する方法

方法1： val() メソッドと length プロパティを使う

jQueryで対象のテキストボックス要素を選択します。
val() メソッドで入力された文字列を取得します。
取得した文字列の length プロパティで文字数を取得します。

$(function() {
  $('#target_textbox').on('keyup keypress change', function() {
    var textLength = $(this).val().length;
    console.log('現在の文字数：' + textLength);
  });
});

text() メソッドでテキストボックス内のテキストを取得します。

$(function() {
  $('#target_textbox').on('keyup keypress change', function() {
    var textLength = $(this).text().length;
    console.log('現在の文字数：' + textLength);
  });
});

ポイント

上記コード例では、keyup, keypress, change イベントで処理を実行していますが、任意のイベントに変更できます。
文字数のカウント結果をリアルタイムに表示したい場合は、console.log ではなく、別の要素に書き出す処理を追加する必要があります。
改行コード（\n）を含む場合は、length プロパティで取得される文字数に改行コードも含まれます。改行コードを除いた文字数を取得したい場合は、trim() メソッドで余分なスペースを除去してから length プロパティを使用する必要があります。

上記以外にも、jQueryプラグインなどを利用して、より高度な文字数カウント機能を実現することも可能です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery テキストボックス文字数カウント</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function() {
      $('#target_textbox').on('keyup keypress change', function() {
        var textLength = $(this).val().length;
        $('#text_length').text(textLength);
      });
    });
  </script>
</head>
<body>
  <input type="text" id="target_textbox" placeholder="文字を入力してください">
  <p>現在の文字数：<span id="text_length">0</span></p>
</body>
</html>

説明

index.html ファイルを作成し、上記コードを記述します。
<script> タグで jQuery ライブラリを読み込みます。
<input type="text" id="target_textbox"> で、文字入力を対象とするテキストボックス要素を作成します。
<p>現在の文字数：<span id="text_length">0</span></p> で、文字数のカウント結果を表示する要素を作成します。
$(function()) 内で、#target_textbox 要素に keyup, keypress, change イベントを設定します。
イベントハンドラ内で、$(this).val().length で入力された文字数を取得し、$('#text_length').text(textLength) で #text_length 要素のテキストに設定します。

実行方法

ブラウザで index.html ファイルを開きます。
テキストボックスに文字を入力すると、リアルタイムに現在の文字数が表示されます。

このサンプルコードは、基本的な文字数カウント機能を実装しています。必要に応じて、スタイル設定や機能拡張などを追加してください。

jQuery でテキストボックスの入力文字数を取得するその他の方法

prop() メソッドを使う

$(function() {
  $('#target_textbox').on('keyup keypress change', function() {
    var textLength = $(this).prop('value').length;
    console.log('現在の文字数：' + textLength);
  });
});

$(function() {
  $('#target_textbox').on('keyup keypress change', function() {
    var textLength = $(this).attr('value').length;
    console.log('現在の文字数：' + textLength);
  });
});

jQuery UI を利用すると、より高度な文字数カウント機能を実装することができます。

$(function() {
  $('#target_textbox').on('keyup keypress change', function() {
    var textLength = $(this).text().length;
    $(this).siblings('.ui-helper-clearfix').find('.ui-widget-content').text(textLength);
  });
});

自作の関数を使う

function countTextLength(textBox) {
  var textLength = textBox.val().length;
  return textLength;
}

$(function() {
  $('#target_textbox').on('keyup keypress change', function() {
    var textLength = countTextLength($(this));
    console.log('現在の文字数：' + textLength);
  });
});

それぞれの方法の比較

方法	説明	メリット	デメリット
`val()` メソッドと `length` プロパティを使う	最も基本的な方法	シンプルでわかりやすい	改行コードを含む場合に誤った文字数が取得される可能性がある
`prop()` メソッドを使う	`val()` メソッドとほぼ同じ	こちらもシンプルでわかりやすい	古いブラウザでは動作しない可能性がある
`attr()` メソッドを使う	`val()` メソッドとほぼ同じ	属性値を取得するため、高速な処理が可能	属性値として文字列が設定されていない場合はエラーになる可能性がある
jQuery UI を使う	高度な機能を実装できる	カスタマイズ性が高い	jQuery UI を読み込む必要がある
自作の関数を使う	柔軟な処理が可能	コードを分離できる	複雑な処理になるとコードがわかりにくくなる可能性がある