テキストエリアの制限字数以上の文字を消したい

解決済

質問者：shorinji36
質問日時：2011/02/20 23:07
回答数：1件

いつもお世話になっております。

現在、JavaScriput勉強中の初心者です。

テキストエリアにJavaScriptでmaxlength機能を付け制限字数を超えると警告ダイアログを出す

ようにしたのですがコピペで制限字数を２文字以上超えるとBackSpaceで１文字消すたびに

警告ダイアログが出るというバグが起きてしまいます。

そこで警告ダイアログのOKボタンを押すと制限字数以上の文字は消すプログラムが組みたい

のですがどうすればよいですか？

あと残り入力可能文字カウンタをsetIntervalを使ったものに変更したら警告ダイアログすら表示

されなくなってしまいました・・・よろしくお願いします。

●変更前
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>文字のカウント</title>
　　<script type="text/javascript"></script>
</head>
<body>
<form name="myFORM">
<textarea cols="46" rows="5" name="myTEXT" onkeyup="ShowLength(value); check();" onmouseout="ShowLength(value); check();"></textarea><br />
あと<span id="inputlength">20</span>文字入力できます<br />
</form>
</body>

●変更後
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>文字のカウント</title>
　　<script type="text/javascript"></script>
</head>
<body>
<form name="myFORM">
<textarea cols="46" rows="5" name="myTEXT" onkeyup="ShowLength(value); check();" onmouseout="ShowLength(value); check();"></textarea><br />
あと<span id="inputlength">20</span>文字入力できます<br />
</form>
</body>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： babu_baboo
回答日時：2011/02/21 00:48

そのまんま、こぴぺして、ぜんかくくうはくを、はんかくにしてね

すくりぷとは、<head>のなかだけとはかぎらない

<!DOCTYPE html>
<title></title>

<body>
<form action="#">
　<p>HTML5 なら、textarea にも、 maxlength があるよ！というか…</p>
　<p>
　　<input type="text" id="title1" name="title" size="50" maxlength="10">
　　あと<span id="inputlength1">--</span>文字入力できます
　</p>
　<p>
　　<textarea id="title2" name="title" size="50"></textarea>
　　あと<span id="inputlength2">--</span>文字入力できます
　</p>
</form>

<script>

function lengthCounter (node, max, cut) {
　max = max || Number (node.maxLength) || 20;
　return function () {
　　var rest = max - node.value.length;
　　if (rest < 0) {
　　　if (cut) {
　　　　alert ('さくじょする');
　　　　rest = max;
　　　　node.value = node.value.substring (0, max);
　　　}
　　}
　　return rest;
　};
}

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'), 20, true)), 333);

</script>