No.2ベストアンサー
- 回答日時:
Webコンテンツを作成しています。
ユーザの入力をJavaScriptによって細かくチェックしたいという気持ちは分かりますが、あんまりしつこくやるとユーザに嫌われます。
各入力フィールドごとに制限事項を小さい字で補足しておき、送信ボタン押下時のみチェックしてalertする程度が1番いいようです。
もう少しやるにしても、onBlurのみのチェックにしておいた方がいいですよ。
JavaScriptの練習がしたいというのであれば、387さんの回答を試してみるとよいと思います。
No.1
- 回答日時:
以下のようにすると良いのではないでしょうか?
※ 動作確認しやすいように 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でのみ動作確認しています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- FC2ブログ テキスト版からURLも表示できるように設定できないのでしょうか。 ブログにURLを載せようとしたら文 2 2023/02/12 11:20
- Evernote Evernote(エバーノート)の文字化け 1 2022/04/05 19:30
- その他(パソコン・スマホ・電化製品) アクロバットリーダーでテキスト入力して保存すると四角の中に×が入った状態になります 文字化け❓️ 解 1 2023/08/16 08:11
- フリーソフト テキストファイル内を検索したい 1 2022/06/01 08:33
- その他(プログラミング・Web制作) 2つのテキストファイルを比べて文字列を特定する方法を教えて下さい 5 2022/05/01 15:22
- Excel(エクセル) エクセルでセルに何らかの文字が入力されたらそれを任意の数値として認識させる方法がしりたいです。 3 2023/03/16 20:19
- 物理学 量子力学のテキストのフーリエ変換の記述について 1 2022/10/16 17:00
- C言語・C++・C# VisualStudioのソースコードで漢字を使いたい 4 2022/05/21 10:16
- その他(Microsoft Office) Excelの条件付き書式についての質問です。 2 2022/09/08 01:25
- UNIX・Linux sedでの正規化 2 2022/05/10 11:39
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptで入力フォームが空...
-
条件により、リンク先に画面遷...
-
フォームの値が0だったら空白...
-
JSPとJavaScriptの連携について...
-
ラジオボタンによるフォームの...
-
テキストボックスを無効にする...
-
フィールドを有効(enabled?)に...
-
PDFフォームで条件つき金額を表...
-
テキストエリア入力文字数の表...
-
フォームの<TEXTAREA>で文字数...
-
onClickとsubmitの処理順序
-
手書き入力モードを利用して、...
-
Javascriptが機能せず原因が分...
-
URLの/以降だけを入力したいです。
-
ソースコードは下の共有コード...
-
return trueとreturn falseの用...
-
Javascriptでのbuttonのname属...
-
全てのselect要素をデフォルト...
-
一覧から選択した行の行番号を...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onClickとsubmitの処理順序
-
テキストボックス入力を半角英...
-
JSPとJavaScriptの連携について...
-
テキストフィールドに入力した...
-
フォームの値が0だったら空白...
-
条件により、リンク先に画面遷...
-
文末の改行コードを削除したい
-
PDFフォームで条件つき金額を表...
-
javascriptで入力フォームが空...
-
入力した文字を大文字に変換し...
-
JavaScriptのアレンジがしたいです
-
イベント発生時に入力待ち状態...
-
VBScriptで未入力のチェック(...
-
フォームから入力すると、入力...
-
vbsでフォームに値を入力できない
-
日付入力欄の表示形式を自動的...
-
javascriptで入力禁止文字をチ...
-
あるテキスト入力だけ右クリッ...
-
Javascriptが機能せず原因が分...
-
HTMLで入力したものを変数で扱...
おすすめ情報