jquery.maxcharwarning.jsを使ってテキスト入力時(input)に文字制限アラートメッセージを表示する方法をご紹介します。
Contents
テキスト入力時(input)に文字制限のアラートメッセージを表示するCSSの記述
※入力エリア(input)とアラートメッセージ(.input-error)のCSS記述です。必要に応じて変更して下さい。
<style type="text/css"> body{ text-align: center; padding: 20px; font-size: 16px; line-height: 1.8em; } h1{ text-align: center; font-size: 32px; line-height: 1.4em; } ul{ list-style:none; padding:0; } li{ margin-bottom:2em; } li span{ color: red; display: block; } .input-error{ border:2px solid red; } input{ padding:10px; border-radius:4px; font-size:16px; } </style>
テキスト入力時(input)に文字制限のアラートメッセージを表示するHTMLの記述
※inputタグに以下の内容で記述します
<input class="文字制限inputエリア" data-max-length-warning="アラートメッセージ" data-max-length="制限文字数" data-max-length-warning-container="アラートメッセージ出力先class名" placeholder="プレースホルダ文字" type="text" /> <span class="アラートメッセージ出力先class名"></span>
※以下は2つのinputエリアとアラートメッセージを表示するパターンを用意しました。アラートメッセージはdata-max-length-warning-containerに記載したに出力されます。必要に応じて変更して下さい。
<h1>input入力時に文字制限のアラートメッセージを表示します。<br>以下に最大文字数10文字、15文字inputエリアを用意しましたので<br>最大文字数以上の文字を入力してみて下さい。</h1> <ul> <li> <input class ="chk" data-max-length-warning="10文字以内で入力してください" data-max-length="10" data-max-length-warning-container="name" placeholder="名前を10文字以内で入力" type="text" /> <span class="name"></span> </li> <li> <input class ="chk" data-max-length-warning="最大15文字までです" data-max-length="15" data-max-length-warning-container="address" placeholder="住所を最大15文字までに入力" type="text" /> <span class="address"></span> </li> </ul>
jquery.maxcharwarning.jsを使ってテキスト入力時(input)に文字制限のアラートメッセージを表示するJavaScriptの記述
※jquery.min.js、jquery.maxcharwarning.jsファイルを読み込みます。$(文字制限inputエリア).maxCharWarning()を記述します。必要に応じて変更して下さい。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.maxcharwarning.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.chk').maxCharWarning(); }); </script>
jquery.maxcharwarning.jsを使ってinput入力時に文字制限のアラートメッセージを表示する方法デモページ
jquery.maxcharwarning.jsを使ってinput入力時に文字制限のアラートメッセージを表示する方法デモページ
ソース元:Maximum Characters limit exceeded warning
以下ソース元です。
Maximum Characters limit exceeded warning
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告