やりたいこと
JavaScriptで、文字数をリアルタイムでカウントしたいです。
カウントは下記2パターンで行いたいです。
①空の入力欄からのカウント
②input type="text"やtextareaに既に値が入っている編集用の画面でのカウント
困っていること・試したこと
①については問題なさそうなのですが、
②の既に値が入っている編集用の画面の際に
①と同じような記述では、読み込み時の文字数が、未編集の場合に0文字となってしまうため
window.onload でのカウントをしたらどうかと思い、試したところ
テキストエリアでは、既に入力してある値の文字数は出くるようになったのですが、さらに文字数をした際にリアルタイムでカウントができません。
また、inputでは最初からずっと0文字のままとなってしまいます。
html
1 <h2>入力画面</h2> 2 3 <input type="text" rows="5" id="js-textCount01" onkeyup="viewStrLen01();"></textarea> 4 <p id="strLen01">0文字</p> 5 6 <textarea name="" rows="5" id="js-textCount02" onkeyup="viewStrLen02();"></textarea> 7 <p id="strLen02">0文字</p> 8 9 10 <h2>編集用の画面</h2> 11 12 <input type="text" rows="4" id="js-textCount03" onkeyup="viewStrLen03();" value="既に文字が入っています!"></textarea> 13 <p id="strLen03">0文字</p> 14 15 <textarea name="" rows="4" id="js-textCount04" onkeyup="viewStrLen04();">既に文字が入っています!</textarea> 16 <p id="strLen04">0文字</p>
JavaScript
1 //入力画面 2 function viewStrLen01(){ 3 var len = document.getElementById("js-textCount01").value.length; 4 document.getElementById("strLen01").innerText = len + "文字"; 5 } 6 7 function viewStrLen02(){ 8 var len = document.getElementById("js-textCount02").value.length; 9 document.getElementById("strLen02").innerText = len + "文字"; 10 } 11 12 //編集用の画面 13 window.onload = function() { 14 var len = document.getElementById("js-textCount03").value.length; 15 document.getElementById("strLen03").innerText = len + "文字"; 16 } 17 function viewStrLen03(){ 18 var len = document.getElementById("js-textCount03").value.length; 19 document.getElementById("strLen03").innerText = len + "文字"; 20 } 21 22 window.onload = function() { 23 var len = document.getElementById("js-textCount04").value.length; 24 document.getElementById("strLen04").innerText = len + "文字"; 25 } 26 function viewStrLen03(){ 27 var len = document.getElementById("js-textCount04").value.length; 28 document.getElementById("strLen04").innerText = len + "文字"; 29 }
解決方法を教えて頂けませんでしょうか。よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/15 07:23
2021/02/15 08:55