- ベストアンサー
JavaScript初心者のための文字数カウンタ作成方法
- JavaScriptを使用して、文字数カウンタを作成する方法について説明します。
- 提供されたコードでは、コピペした場合にカウントがされない問題があります。この問題を解決するために、setIntervalを使用してカウントを行う方法を説明します。
- 具体的な手順としては、setIntervalを使用して一定の時間ごとにカウントを更新する関数を作成し、その関数をsetIntervalに渡すことが必要です。
- shorinji36
- お礼率83% (1150/1380)
- JavaScript
- 回答数7
- ありがとう数8
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
解決したのかどうかよくわからないので… ご参考までに。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <div> <input type="text" name="title" size="50" maxlength="20"> <p> あと<span id="inputlength">20</span>文字入力できます </p> </div> <script type="text/javascript"> <!-- (function(){ var intervalId = setInterval(function(){ var n = 20 - document.getElementsByName("title")[0].value.length; if(n<0) n = 0; document.getElementById("inputlength").innerHTML = n; }, 100); })(); //--> </script> </body> </html>
その他の回答 (6)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>No.5 お礼 >var tm タイマーを止めたいときに使います。 タイマーを止める必要がなければ無視して下さい。 使い方は解説サイトや解説書などに、setIntervalやsetTimeoutの関連項目として書かれていると思います。
お礼
再度、回答有難うございます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
var tm=setInterval( function(){ShowLength(document.getElementsByName('title')[0].value);}, 10 ); すみません、間違えました。 getElementsByTagNameではなく、getElementsByNameです。
お礼
回答有難うございます。 すいませんが初心者なもので "var tm" で定義した変数をどのように扱えばよいのかわかりません。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
onchangeはフォーカスをはずれないとイベントが発生しないブラウザもあります。 key****ではキーボードから入力しないコピーペースト、ソフトウェアキーボードや手書き入力に反応しませんし、 （昔は日本語入力の漢字変換で文字数が違っていましたし、） 文字数チェックはタイマーが基本だと思います。 var tm=setInterval( function(){ShowLength(document.getElementsByTagName('title')[0].value);}, 10 ); 未検証です。
お礼
回答有難うございます。
- yambejp
- ベストアンサー率51% (3827/7415)
#1ですが・・・あれ？できません？ <script type="text/javascript"> function ShowLength(str) { document.getElementById("inputlength").innerHTML = 20 - str.length + "文字入力できます"; } </script> <input type="text" name="title" size="50" maxlength="20" onkeyup="ShowLength(this.value)" onchange="ShowLength(this.value)"><br /> あと<a id="inputlength">20文字入力できます</a>
お礼
回答有難うございます。 #4さんが書かれているように"onchange"はIE8ではカーソルが外れないとダメでした。 代わりに"onmouseout","onmousemove"で試したところコピペでもカウントされました。
- babu_baboo
- ベストアンサー率51% (268/525)
<p> <input type="text" id="title1" name="title" size="50" maxlength="20"> あと<span id="inputlength1">20</span>文字入力できます </p> <p> <input type="text" id="title2" name="title" size="50" maxlength="15"> あと<span id="inputlength2">15</span>文字入力できます </p> <script> function lengthCounter (node, max) { max = Number (node.maxLength) || max || 20; return function () { return max - node.value.length; }; } function dispValue (node, cbFunc) { return function () { node.firstChild.nodeValue = cbFunc (); }; } setInterval ( dispValue ( document.getElementById ('inputlength1'), lengthCounter (document.getElementById ('title1'))), 333); setInterval ( dispValue ( document.getElementById ('inputlength2'), lengthCounter ( document.getElementById ('title2'))), 333); </script> すうりぷとは、おんろうどごにしてね すぱんのなかには、さいしょにてきとうなもじをいれてね ぜんかくくうはくは、はんかくくうはくにしてね
お礼
回答ありがとうございます。 やり方が悪いのかもしれませんが、普通のカウントすらできませんでした。 ＞すうりぷとは、おんろうどごにしてね 初心者なのでこの意味すらわかりません。
- yambejp
- ベストアンサー率51% (3827/7415)
onchangeを設定しておけばよいのでは？ <input type="text" name="title" size="50" maxlength="20" onkeyup="ShowLength(this.value)" onchange="ShowLength(this.value)"><br />
お礼
回答ありがとうございます。 やり方が悪いのかもしれませんが、コピペでカウントできませんでした。
お礼
回答ありがとうございます。 やっと理解できました。