テキスト入力時（input）に文字制限アラートメッセージを表示する方法【jquery.maxcharwarning.js】｜DAD UNION

Webフォームでは、ユーザーが入力する文字数に制限を設けたい場面がよくあります。しかし、単に制限するだけでなく「どのくらい入力できるか」「制限を超えたらどうなるか」を明確に伝えることで、ユーザーにとって使いやすいUIを実現できます。

本記事では、jQueryプラグインの一つであるjquery.maxcharwarning.jsを使って、テキスト入力時に文字数制限のアラートメッセージを自動表示する方法をご紹介します。CSS・HTML・JavaScriptの具体的なコード付きで解説しているので、初心者の方でもすぐに導入できます。

「入力制限が必要だけど、簡単に実装したい」「ユーザビリティを意識したフォームにしたい」といった方は、ぜひ参考にしてみてください。

Contents

テキスト入力時（input）に文字制限のアラートメッセージを表示するCSSの記述
テキスト入力時（input）に文字制限のアラートメッセージを表示するHTMLの記述
jquery.maxcharwarning.jsを使ってテキスト入力時（input）に文字制限のアラートメッセージを表示するJavaScriptの記述
jquery.maxcharwarning.jsを使ってinput入力時に文字制限のアラートメッセージを表示する方法デモページ
ソース元：Maximum Characters limit exceeded warning
まとめ

テキスト入力時（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>