電子書籍の厳選無料作品が豊富！

文字数カウンタにsetIntervalを使うには

解決済

  • 質問者：shorinji36
  • 質問日時：
  • 回答数：7件

JavaScript初心者です。

JavaScriptで残り入力可能文字数を表示するカウンタを作成したのですが

以下のプログラムだとコピペしたときカウントがされません。

そこでsetIntervalを使ってカウントできるようにしたいのですがどのように

「変数(省略可) = setInterval(関数名,ミリ秒)」

を流用すればよいのかイマイチわかりません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>文字のカウント</title>
　　<script type="text/javascript"><!--
　　　　function ShowLength( str ) {
　　　　　　document.getElementById("inputlength").innerHTML = 20 - str.length + "文字入力できます";
　　　　}
　　// --></script>
</head>

<body>
　　<input type="text" name="title" size="50" maxlength="20" onkeyup="ShowLength(value)"><br />
あと<a id="inputlength">20文字入力できます</a>
</body>
</html>

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.6ベストアンサー

  • 回答者： fujillin
  • 回答日時：

解決したのかどうかよくわからないので…




ご参考までに。

<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

やっと理解できました。

通報する
お礼日時：2011/02/20 22:11

No.7

  • 回答者： taloo
  • 回答日時：

>No.5 お礼


>var tm

タイマーを止めたいときに使います。
タイマーを止める必要がなければ無視して下さい。

使い方は解説サイトや解説書などに、setIntervalやsetTimeoutの関連項目として書かれていると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

再度、回答有難うございます。

通報する
お礼日時：2011/02/20 22:07

No.5

  • 回答者： taloo
  • 回答日時：

var tm=setInterval(


function(){ShowLength(document.getElementsByName('title')[0].value);},
10
);

すみません、間違えました。
getElementsByTagNameではなく、getElementsByNameです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答有難うございます。

すいませんが初心者なもので "var tm" で定義した変数をどのように扱えばよいのかわかりません。

通報する
お礼日時：2011/02/17 11:21

No.4

  • 回答者： taloo
  • 回答日時：

onchangeはフォーカスをはずれないとイベントが発生しないブラウザもあります。


key****ではキーボードから入力しないコピーペースト、ソフトウェアキーボードや手書き入力に反応しませんし、
（昔は日本語入力の漢字変換で文字数が違っていましたし、）
文字数チェックはタイマーが基本だと思います。

var tm=setInterval(
function(){ShowLength(document.getElementsByTagName('title')[0].value);},
10
);

未検証です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答有難うございます。

通報する
お礼日時：2011/02/20 22:06

No.3

  • 回答者： yambejp
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答有難うございます。

#4さんが書かれているように"onchange"はIE8ではカーソルが外れないとダメでした。

代わりに"onmouseout","onmousemove"で試したところコピペでもカウントされました。

通報する
お礼日時：2011/02/17 10:18

No.2

  • 回答者： babu_baboo
  • 回答日時：

<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>

すうりぷとは、おんろうどごにしてね
すぱんのなかには、さいしょにてきとうなもじをいれてね
ぜんかくくうはくは、はんかくくうはくにしてね
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

やり方が悪いのかもしれませんが、普通のカウントすらできませんでした。

＞すうりぷとは、おんろうどごにしてね
初心者なのでこの意味すらわかりません。

通報する
お礼日時：2011/02/16 13:14

No.1

  • 回答者： yambejp
  • 回答日時：

onchangeを設定しておけばよいのでは？



<input type="text" name="title" size="50" maxlength="20" onkeyup="ShowLength(this.value)" onchange="ShowLength(this.value)"><br />
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

やり方が悪いのかもしれませんが、コピペでカウントできませんでした。

通報する
お礼日時：2011/02/16 12:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報