テキストエリアで文字数が200になったら警告するようなことができますか?

(例)
テキストエリアに文字を入れていって、201文字目に入ったらぽっぷアップで「これ以上入力できません」とお知らせ。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

Webコンテンツを作成しています。



 ユーザの入力をJavaScriptによって細かくチェックしたいという気持ちは分かりますが、あんまりしつこくやるとユーザに嫌われます。

 各入力フィールドごとに制限事項を小さい字で補足しておき、送信ボタン押下時のみチェックしてalertする程度が1番いいようです。

 もう少しやるにしても、onBlurのみのチェックにしておいた方がいいですよ。

 JavaScriptの練習がしたいというのであれば、387さんの回答を試してみるとよいと思います。
    • good
    • 0

以下のようにすると良いのではないでしょうか?


※ 動作確認しやすいように 5文字でチェックしています。

 ポイントは、テキストエリアに入力する手段として、キー入力と「貼り付け」の
2種類がある事です。
 それと、キー入力時には事前にチェックができますが、「貼り付け」時には
テキストエリアがフォーカスを失う(別の要素に移動する)時しかチェック
できない為、データが既に文字数制限をオーバーしている可能性がある点です。
 その為、最後に文字数制限内だったデータを保持する処理と制限オーバーした
時に保持しているデータに復元する処理を行っています。
※ データの一部を書き換える(文字列を選択してからキー入力 or「貼り付け」)
 場合の処理も必要ですが、今回は割愛しています。

●スクリプト
var strTextarea = "" ;  // テキストエリアデータの保存用
function funcCheckOnChange( oTextarea )
{
 if ( oTextarea.value.length > 5 )
 {
  alert( "文字数は 5文字迄です。" ) ;
  oTextarea.value = strTextarea ; // データを復元
 }
 else
 {
  strTextarea = oTextarea.value ; // データを保存
 }
}
function funcCheckOnKeypress( oTextarea )
{
 if ( oTextarea.value.length >= 5 )
 {
  alert( "文字数は 5文字迄です。" ) ;
  if ( oTextarea.value.length > 5 )
  {
   oTextarea.value = strTextarea ; // データを復元
  }
  event.returnValue = false ; // キー入力をキャンセル
 }
}

●テキストエリア
<TEXTAREA
 onKeypress="funcCheckOnKeypress( this ); strTextarea = this.value"
 onChange="funcCheckOnChange( this )">
</TEXTAREA>

※ IEでのみ動作確認しています。
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

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

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

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

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

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

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

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

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

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

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

●変更前
<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;
    }
    function check() {
      txt = document.myFORM.myTEXT.value;
      n = txt.length;
      if (n > 20) alert("20文字以内にしてください");
    }
    // --></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"><!--
    (function(){
      var intervalId = setInterval(function(){
       var n = 20 - document.getElementsByName("myTEXT")[0].value.length;
       if(n < 0) n = 0;
       document.getElementById("inputlength").innerHTML = n;
      }, 100);
    })();
    function check() {
      txt = document.myFORM.myTEXT.value;
      i = txt.length;
      if (i > 20) alert("20文字以内にしてください");
    }
    // --></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>

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

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

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

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

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

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

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

あと残り入力可能文字カウンタをsetIntervalを使ったものに変更したら警...続きを読む

Aベストアンサー

そのまんま、こぴぺして、ぜんかくくうはくを、はんかくにしてね
すくりぷとは、<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>

そのまんま、こぴぺして、ぜんかくくうはくを、はんかくにしてね
すくりぷとは、<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">...続きを読む

Qテキストエリア文字制限について

テキストエリア文字制限について

失礼します。
javascript初心者です。

複数のテキストエリアの文字制限を行いたく
苦戦しております。

いろいろと検索してみましたが・・・
2日ほど悩んでおります。

AとBでエラーが出た場合はCGIに流れず入力フォームに戻るのですが

Bでエラーが発生しない場合CGIに流れてしまいます。
ですの文字数制限をしても結局CGIに流れてしまうのですが
どのように記述すればよろしいでしょうか??

なんとか・・・ご教授いただければ幸いです。

よろしくお願いいたします。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>入力文字数の制限</title>

<script language="javascript" type="text/javascript">
<!--

var MAXLENGTH = 10;//入力許容最大文字数


function tareachk(frm){
var tmp = frm.vin1.value;
var len = tmp.length;

if(len > MAXLENGTH){alert("A入力可能な文字数は"+MAXLENGTH+"文字までです");}


var tmp = frm.vin2.value;
var len = tmp.length;

if(len > MAXLENGTH){alert("B入力可能な文字数は"+MAXLENGTH+"文字までです");}



else{frm.submit();}


}



// -->
</script>


</head>

<body>

<form action="ccccc.cgi" method="post">
<textarea name="vin1" rows="5" cols="30">10文字まで入力可能</textarea><br>
<textarea name="vin2" rows="5" cols="30">10文字まで入力可能</textarea><br>
<input type="button" value="GO" onclick="tareachk(this.form);">
</form>

</body>
</html>

テキストエリア文字制限について

失礼します。
javascript初心者です。

複数のテキストエリアの文字制限を行いたく
苦戦しております。

いろいろと検索してみましたが・・・
2日ほど悩んでおります。

AとBでエラーが出た場合はCGIに流れず入力フォームに戻るのですが

Bでエラーが発生しない場合CGIに流れてしまいます。
ですの文字数制限をしても結局CGIに流れてしまうのですが
どのように記述すればよろしいでしょうか??

なんとか・・・ご教授いただければ幸いです。

よろしくお願い...続きを読む

Aベストアンサー

>Bでエラーが発生しない場合CGIに流れてしまいます。
そのようにプログラムされています。
分解すると以下のようになっています。
if(len > MAXLENGTH){
  alert("A入力可能な文字数は"+MAXLENGTH+"文字までです");
}
if(len > MAXLENGTH){
  alert("B入力可能な文字数は"+MAXLENGTH+"文字までです");
}
else {
  frm.submit();
}
次のように修正してみてください。
if(len > MAXLENGTH){
  alert("A入力可能な文字数は"+MAXLENGTH+"文字までです");
  return; //★ここで処理を打ち切る
}
if(len > MAXLENGTH){
  alert("B入力可能な文字数は"+MAXLENGTH+"文字までです");
  return; //★ここで処理を打ち切る
}
//★A、Bのチェックが通った場合だけ、ここに到達する。
frm.submit();

QFirefoxでのテキストエリアに入力した文字の改行

Firefoxでのテキストエリアに入力した文字の改行について質問させてください。

http://oshiete1.goo.ne.jp/qa2691799.html

↑のページを参考にテキストエリアに入力したテキストがリアルタイムで確認できるページを作成しました。

IEではテキストエリア内の改行がちゃんと反映されたのですが、Firefoxではテキストエリア内の改行が反映されずに、エンターキーを押すと半角スペース?になるだけで一連の文として出力されてしまいます。

どなたかこの現象の解決策をお知りの方がいらっしゃいましたらご教授ください。
よろしくお願いします。

Aベストアンサー

どのようなコードで実行しているのか不明なのでなんともわかりませんが…

参考になさっている回答の、No5までちゃんと読みましたか?
No3までだと単純にvalueを写しているだけなので、HTML上では改行されません。
テキストエリア内の改行をHTMLの改行(<br>など)に変換するか、または、<pre>などを利用する必要があります。
(↑上記質問の回答No4に書いてあるのと同じことですが…)

一応、FFで実験してみましたが、問題なく改行されます。
(document.allなどの表記は少々古いような気もしますが…)


ん?・・・・ひょっとして、回答No5の修正をIEの方しかやってないとか?
回答のコードはIEとFFで場合わけして記しているので、修正箇所は合計2箇所になるはずなんですが…
まぁ、IEでもgetElementByIdは使えると思いますので(少なくともIE6以降は)コードの記述も後半だけにしちゃってもOKなはずですけど。

(↑推測なので、違っていたら失礼)

Qテキストエリアの行頭行末に指定の文字を挿入

お世話になります。
テキストエリア内、全ての行頭行末に「■」を挿入する方法を教えていただけないでしょうか?

テキストエディタで正規表現を使い変換していましたが、毎回変換対象を指定するのも億劫ですので、ローカルベースで動作するjavascriptでできたら・・・と思い投稿いたしました。

よろしくお願い致します。

Aベストアンサー

何の工夫も無し

<textarea id="hoge"></textarea>
<button onclick="change();">change</button>
<script type="text/javascript">
function change(){
document.getElementById("hoge").value = document.getElementById("hoge").value.replace(/(^.*$)/gm,"■"+"$1"+"■");
}
</script>

元に戻す機能無し。
すでに、"■"があった時も追加してしまう。
空行にも追加してしまう。

Qボタンをクリックするとテキストエリアに文字が表示される。

はじめまして
下記内容のJavaScriptを見つけたのですが
これをどうにか違うものにしたいのです。

<html>
<head>
<TITLE>テキストエリアに複数項表示する</TITLE>

<script language="JavaScript"><!--
function setChars()
{
str1="テキストエリアに";
str2="複数項にわたる文字を";
str3="表示します。";
document.myFORM.myTEXT.value=str1+"\n"+str2+"\n"+str3;
}
/--></script>
</head>
<body>
<form name="myFORM">
<textarea name="myTEXT"rows="10"></textarea><br>
<input type="button"value="複数行表示"onClick="setChars()">
</form>
</body>
</html>
------------------------------------------------

例えば

(月・火・水・木)とそれぞれのボタンがあるとします。

そのボタンを押すと、複数行テキストへ
月曜→○○○○
火曜→○○○○
水曜→○○○○
木曜→○○○○
というように、表示させたいのです。

また、複数行テキストに入力された文字が消えず改行されて表示させたいのです。

自分でもいろいろと試してみたのですが、頭が悪く、全く思ったようにできません。

お忙しいところ大変申し訳ありませんが、

上記に記載した内容のスクリプトはありますでしょうか。

ご返答いただけると幸いです。

はじめまして
下記内容のJavaScriptを見つけたのですが
これをどうにか違うものにしたいのです。

<html>
<head>
<TITLE>テキストエリアに複数項表示する</TITLE>

<script language="JavaScript"><!--
function setChars()
{
str1="テキストエリアに";
str2="複数項にわたる文字を";
str3="表示します。";
document.myFORM.myTEXT.value=str1+"\n"+str2+"\n"+str3;
}
/--></script>
</head>
<body>
<form name="myFORM">
<textarea name="myTEXT"rows="10"></textarea><br>
<input ...続きを読む

Aベストアンサー

Wizard_Zeroと申します。

例えばこんな感じでしょうか?

<html>
<head>
<TITLE>テキストエリアに複数項表示する</TITLE>

<script language="JavaScript"><!--
function setChars(text)
{
if (document.myFORM.myTEXT.value || "") {
document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + "\n"
}

document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + text
}
/--></script>
</head>
<body>
<form name="myFORM">
<textarea name="myTEXT"rows="10"></textarea><br>
<input type="button" value="月曜" onClick="setChars('AAAAA')">
<input type="button" value="火曜" onClick="setChars('BBBBB')">
<input type="button" value="水曜" onClick="setChars('CCCCC')">
<input type="button" value="木曜" onClick="setChars('DDDDD')">
<input type="button" value="金曜" onClick="setChars('EEEEE')">
</form>
</body>
</html>

Wizard_Zeroと申します。

例えばこんな感じでしょうか?

<html>
<head>
<TITLE>テキストエリアに複数項表示する</TITLE>

<script language="JavaScript"><!--
function setChars(text)
{
if (document.myFORM.myTEXT.value || "") {
document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + "\n"
}

document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + text
}
/--></script>
</head>
<body>
<form name="myFORM">
<textarea name="myTEXT"rows="10"></textare...続きを読む


人気Q&Aランキング

おすすめ情報