[JavaScript] リアルタイムに入力文字数を表示する

投稿日：2016年11月19日更新日：2018年5月2日

リアルタイムに入力文字数を表示するサンプルです。

サンプルソース

例）リアルタイムに入力文字数を表示する

function viewStrLen(){
  var len = document.getElementById("area1").value.length;
  document.getElementById("strLen").innerText = len + "文字";
}

function viewStrLen(){

var len = document.getElementById("area1").value.length;

document.getElementById("strLen").innerText = len + "文字";

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <textarea id="area1" onkeyup="viewStrLen();"></textarea>
  <div id="strLen">0文字</div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

入力文字数をリアルタイムで表示します。

0文字

解説

onchangeイベントはフォーカスが外れた時に発生するため、onkeyupイベントで処理を走らせています。

執筆者：とら