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

2020-04-07jQuery プラグイン

テキストフォーム、テキストエリアフォームなどで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で使えるオプション一覧