まだデータがありません。
テキストエリアにあと何文字入力できるかを表示「Freechars」
当ページのリンクには広告が含まれています。
スポンサーリンク
テキストエリアにあと何文字入力できるかを表示するプラグイン「Freechars」を紹介します。
jQueryプラグイン「Freechars」
HTMLのtextareaタグは、maxlengthを使って入力する文字数を制限することができます。以下の例だと100文字入力することができます。
<textarea maxlength="100"></textarea>
このプラグインを使えば、テキストエリアに入力している最中に「あと何文字」入力できるかを表示することができます。
ユーザーが入力できる文字数を視認できるので、利便性がアップしますね。
スポンサーリンク
それでは、デモページのテキストエリアに文字を入力してみてください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="swirly のデモでーす。">
<title>FreeChars - jQueryプラグイン</title>
</head>
<body>
<h1>FreeChars のデモでーす。</h1>
<p>
<span>あと「</span>
<span id="count"></span>
<span>」文字入力できます。</span>
</p>
<textarea maxlength="100" style="width:300px;"></textarea>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.freeChars.js"></script>
<script>
var $count = $('#count')
$('textarea').freeChars({
update: $count
});
</script>
</body>
</html>
スポンサーリンク