入力した文字数/最大文字数をカウント「BootStrap Maxlength」
当ページのリンクには広告が含まれています。
スポンサーリンク
入力した文字数/最大文字数をカウントするプラグイン「BootStrap Maxlength」を紹介します。
jQueryプラグイン「BootStrap Maxlength」
このプラグインを使えば、フォームに入力した文字数とそのフォームに入力できる最大の文字数を表示してくれます。
また、CSSフレームワーク「BootStrap」に対応しています。
スポンサーリンク
それではデモページのフォームに文字を入力してみてください。
デモのソース（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>
スポンサーリンク