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

2020-04-072023-02-16jQuery プラグイン

テキストフォーム、テキストエリアフォームなどでHMLで指定したmaxlength（最大文字数）を元に残りの入力可能文字数を取得・表示することが可能なjQueryプラグイン、jquery.maxlength.jsの紹介です。

「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ファイルを利用します。

<script type="text/javascript" src="jquery.maxlength.js"></script>

jquery-maxlength CDN by jsDelivr – A CDN for npm and GitHub

$('フォームのid').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」で使えるオプション一覧