テキストエリアで文字数が２００になったら警告

質問

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

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

回答No.2

leaz024 · ベストアンサー

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

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

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

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

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

回答No.1

387

以下のようにすると良いのではないでしょうか？
※ 動作確認しやすいように 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でのみ動作確認しています。