Javascriptで既に入力値がある場合も文字数をカウントしたい

Question

やりたいこと

JavaScriptで、文字数をリアルタイムでカウントしたいです。

カウントは下記2パターンで行いたいです。
①空の入力欄からのカウント
②input type="text"やtextareaに既に値が入っている編集用の画面でのカウント

困っていること・試したこと

①については問題なさそうなのですが、
②の既に値が入っている編集用の画面の際に
①と同じような記述では、読み込み時の文字数が、未編集の場合に0文字となってしまうため
window.onload　でのカウントをしたらどうかと思い、試したところ
テキストエリアでは、既に入力してある値の文字数は出くるようになったのですが、さらに文字数をした際にリアルタイムでカウントができません。
また、inputでは最初からずっと0文字のままとなってしまいます。

  <h2>入力画面</h2>

    <input type="text" rows="5" id="js-textCount01" onkeyup="viewStrLen01();"></textarea>
    <p id="strLen01">0文字</p>

    <textarea name="" rows="5" id="js-textCount02" onkeyup="viewStrLen02();"></textarea>
    <p id="strLen02">0文字</p>


    <h2>編集用の画面</h2>

    <input type="text" rows="4" id="js-textCount03" onkeyup="viewStrLen03();" value="既に文字が入っています！"></textarea>
    <p id="strLen03">0文字</p>

    <textarea name="" rows="4" id="js-textCount04" onkeyup="viewStrLen04();">既に文字が入っています！</textarea>
    <p id="strLen04">0文字</p>

      //入力画面
      function viewStrLen01(){
        var len = document.getElementById("js-textCount01").value.length;
        document.getElementById("strLen01").innerText = len + "文字";
      }

      function viewStrLen02(){
        var len = document.getElementById("js-textCount02").value.length;
        document.getElementById("strLen02").innerText = len + "文字";
      }

      //編集用の画面
      window.onload = function() {
        var len = document.getElementById("js-textCount03").value.length;
        document.getElementById("strLen03").innerText = len + "文字";
      }
      function viewStrLen03(){
        var len = document.getElementById("js-textCount03").value.length;
        document.getElementById("strLen03").innerText = len + "文字";
      }

      window.onload = function() {
        var len = document.getElementById("js-textCount04").value.length;
        document.getElementById("strLen04").innerText = len + "文字";
      }
      function viewStrLen03(){
        var len = document.getElementById("js-textCount04").value.length;
        document.getElementById("strLen04").innerText = len + "文字";
      }

解決方法を教えて頂けませんでしょうか。よろしくお願いいたします。

Answer 1

テキストエリアでは、...リアルタイムでカウントができません。

      function viewStrLen03(){
        var len = document.getElementById("js-textCount04").value.length;
        document.getElementById("strLen04").innerText = len + "文字";
      }

関数名が間違っています。viewStrLen04 ですよね。

inputでは最初からずっと0文字のままとなってしまいます。

      //編集用の画面
      window.onload = function() {
        var len = document.getElementById("js-textCount03").value.length;
        document.getElementById("strLen03").innerText = len + "文字";
      }
      ...

      window.onload = function() {

window.onload が上書きされているため、後のほうの関数だけが有効になっています。

    window.onload = function() {
        viewStrLen03();
        viewStrLen04();
    };

のように一つの関数にまとめるか、addEventListener()を使いましょう。

---

ついでですが、onkeyup だとキーボードで入力した場合だけ動いてマウスなどからカット/ペーストすると反応しません。これは oninput を使うと解決します。

Comments

[m.ts10806]

個人的にはいろんな考慮の必要がなくなるonblurを推します。

[pondering]

int32_t様
関数名が間違っており・・・ご指摘くださりありがとうございました。
inputでは最初からずっと0文字のまま、についても、教えていただいた方法で解決しました。
また、onkeyupのカット・ペーストの件も教えてくださって大変感謝いたします。
試したところ確かにマウスでのカット/ペーストに反応せず、この部分は変更するようにします。

m.ts10806様
コメントくださりありがとうございます。onblurでの記述もこれから試してみます！