テキストエリアに書いた文字をカウントする　入力時に処理の方法

今回はJavaScriptでテキストエリアに書かれた文字をカウントする処理を書いていきます。

まずはtextareaを作ります！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <textarea class="textarea"></textarea>
  <p class="string_count">0</p><p>文字</p>
</body>
</html>

テキストエリアと文字をカウントする欄を作りましょう。

デザインは考えずデフォルトのままで作っていきます。

そしてJSを書いていきます。今回はjQueryを使わず純粋にJavaScriptのみで書いていきます。

/** テキストエリアを取得し代入する */
const textarea = document.querySelector('.textarea');

/** 入力中の文字数を表示する */
const string_count = document.querySelector('.string_count');

//  テキストエリアに記入するとonKeyを発動する
textarea.addEventListener('keyup', onKeyUp);

function onKeyUp() {
  // 入力されたテキスト
  var inputText = textarea.value;
  // 文字数を反映
  string_count.innerText = inputText.length;
}

コードはこれだけです。至ってシンプルだと思います。詳しく解説します。

解説

const textarea = document.querySelector(‘.textarea’);

これはclass=”textarea”を取得しtextareaに代入しています。

const string_count = document.querySelector(‘.string_count’);

これも上同様class=”string_count”を取得してstring_countに代入しています。

textarea.addEventListener(‘keyup’, onKeyUp);

三つ目にコードがかなり重要です。textareaが入力された瞬間”onKeyUp”を発火（発動）するようになっています。

そして最後に発火の内容を書いていきます。

function onKeyUp() {
var inputText = textarea.value;
string_count.innerText = inputText.length;
}

inputTextにテキストエリアに入力された中身（要素）を入れていきます。

最後にstring_count.innerTextで、string_countの中身をテキストエリアの文字数を入れて完成です。

0文字

それでは実際に上のテキストエリアに入れてみてください！入れた文字数分カウントされます！

【JavaScript】テキストエリアに書いた文字をカウントする　入力時に処理の方法

解説

コメント