プロが教えるわが家の防犯対策術!

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

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

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が見つからない時は、教えて!gooで質問しましょう!