テキストエリアにあと何文字入力できるかを表示「Freechars」

当ページのリンクには広告が含まれています。

jQuery Plugin » フォーム » テキストエリアにあと何文字入力できるかを表示「Freechars」

テキストエリアにあと何文字入力できるかを表示するプラグイン「Freechars」を紹介します。

jQueryプラグイン「Freechars」

HTMLのtextareaタグは、maxlengthを使って入力する文字数を制限することができます。以下の例だと100文字入力することができます。

<textarea maxlength="100"></textarea>

このプラグインを使えば、テキストエリアに入力している最中に「あと何文字」入力できるかを表示することができます。

ユーザーが入力できる文字数を視認できるので、利便性がアップしますね。

それでは、デモページのテキストエリアに文字を入力してみてください。

「Freechars」のデモ

ソース（ 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>

Freechars

jQueryプラグイン「Freechars」

ソース（ HTML + jQuery ）

関連記事（一部広告含む）