🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2687閲覧

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

pondering

総合スコア104

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/02/15 07:08

やりたいこと

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 }

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

javascript

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

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

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

javscript

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

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

javascript

1 window.onload = function() { 2 viewStrLen03(); 3 viewStrLen04(); 4 };

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


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

投稿2021/02/15 07:17

編集2021/02/15 07:19
int32_t

総合スコア21679

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/15 07:23

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

2021/02/15 08:55

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問