jQueryで入力文字数をチェックしてみます。
例えばテキストエリアに20文字以上入力した場合にエラーとしたい場合があるとします。
サブミットするタイミングかリアルタイムかどちらかでチェックすることになると思いますが、今回はリアルタイムでチェックします。
セレクタ.keyup();を使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> <script src="http://code.jquery.com/jquery.js"></script> <!-- コーディング部分 --> <script type="text/javascript"> $(function(){ $("#area").keyup(function(){ // 郵便番号が変更された時の処理 if($("#area").val().length <= 20){ $("#area+span").text(""); $("#area").removeClass("error"); }else{ $("#area+span").text("20文字を超えています"); $("#area").addClass("error"); } }); }); </script> <style> .error{background-color:#FFCCCC;} .alert{color:#FF0000;font-size:small;} </style> <!-- コーディング部分 --> </head> <body> <form> 入力欄<br> <textarea name="area" id="area" cols="30" rows="3"></textarea> <span class="alert"></span> <br><br> <input type="submit" value="登録"> </form> </body> </html> |
DEMOです。
関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
