今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. 指定した要素の画像やテーブルをレスポンシブに「respontent」
  3. 画像が使えるアニメ効果付きドロップダウンメニュー「EliteBox Menu」
  4. タイプライターのようにテキストを1文字ずつ表示「typist」
  5. 数値のみ入力可能なフォームを実装「Numeric Input」

入力した文字数/最大文字数をカウント「BootStrap Maxlength」

スポンサーリンク

入力した文字数/最大文字数をカウントするプラグイン「BootStrap Maxlength」を紹介します。

jQueryプラグイン「BootStrap Maxlength」

このプラグインを使えば、フォームに入力した文字数とそのフォームに入力できる最大の文字数を表示してくれます。

また、CSSフレームワーク「BootStrap」に対応しています。

スポンサーリンク

それではデモページのフォームに文字を入力してみてください。

「BootStrap Maxlength」のデモ

デモのソース(HTML + jQuery)



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="BootStrap MaxLength のデモでーす。">
<title>BootStrap MaxLength - jQueryプラグイン</title>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
<div class="container">
  <h1>BootStrap MaxLength のデモでーす。</h1>
  <input type="text" class="form-control" maxlength="100" name="moreoptions" id="demo" />
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/bootstrap-maxlength.min.js"></script>
<script>
$(document).ready(function () {
  $('#demo').maxlength({
    alwaysShow: true,
    warningClass: "label label-success",
    limitReachedClass: "label label-danger"
  });
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)