jQuery | フォームの残り入力可能文字数を表示する「jquery.maxlength.js」の使い方

テキストフォーム、テキストエリアフォームなどでHMLで指定したmaxlength(最大文字数)を元に残りの入力可能文字数を取得・表示することが可能なjQueryプラグイン、jquery.maxlength.jsの紹介です。
動作サンプル
jquery.maxlength.jsを利用した簡単な動作サンプルページです。
jquery.maxlength.jsの機能を利用して、フォームの残り入力可能文字数をリアルタイム表示しています。
See the Pen jquery.maxlength.js by yochans (@yochans) on CodePen.
「jquery.maxlength.js」の使い方
「jquery.maxlength.js」はmaxlength pluginからダウンロード、またはCDNファイルを利用します。※要jQuery
<script type="text/javascript" src="jquery.maxlength.js"></script>
jquery-maxlength CDN by jsDelivr – A CDN for npm and GitHub
$('#ターゲットのフォーム').maxlength({
'feedback' : '#出力する場所'
});
HTML
<form action="" method="post">
<p>残り<span id="name-maxlength"></span>文字</p>
<p><input type="text" id="name" name="name" maxlength="20" placeholder="お名前 "value=""></p>
<p>残り<span id="text-maxlength"></span>文字</p>
<textarea id="text" name="text" rows="10" maxlength="2000" placeholder="テキスト"></textarea></p>
</form>
jquery
$('#name').maxlength({
'feedback' : '#name-maxlength'
});
$('#text').maxlength({
'feedback' : '#text-maxlength'
});
jquery.maxlengthで使えるオプション一覧
オプション | 初期値 | 説明 |
---|---|---|
feedback | – | 出力場所の指定 |
hardLimit | true | 文字を追加し続けることができないようにするかどうか |
useInput-maxlength | false | useInput-maxlength属性の代わりにmaxlengthという名前の非表示入力を探すかどうか |
words | false | 文字または単語で制限します。 |
ディスカッション
コメント一覧
まだ、コメントがありません