textareaやinput要素で入力可能な文字数を表示することができるスクリプト「short-and-sweet」

short-and-sweetは、textareaやinputでmaxlengthが指定されている場合に、入力可能な残りの文字数を表示してくれるスクリプトです。jQueryなどにも依存せず、単体で動きます。

以下に簡単なデモを用意したので、挙動についてはデモページをご確認ください。テキストエリアに文字を入力すると、残り文字数がリアルタイムで変化します。

デモページを見る

short-and-sweetの使い方

ステップ1. short-and-sweetのダウンロードと設置

まず、short-and-sweetをGitHubからダウンロードします。

ダウンロードしたファイルを解凍して、distフォルダ内にあるshort-and-sweet.min.jsをサーバーにアップしましょう。

ステップ2. HTMLのマークアップ

フォームでは、以下のようにmaxlengthを指定します。

<textarea maxlength="200"></textarea>

ステップ3. short-and-sweetの実行

最後に、short-and-sweet.min.jsを読み込んで、short-and-sweetを実行します。

<script src="short-and-sweet.min.js"></script>
<script>
shortAndSweet('textarea', {
  counterClassName: 'my-short-and-sweet-counter', //カウンターを内包するクラス
  counterLabel: '残り {remaining} 文字入力できます' //カウンター部分に表示するテキスト
});
</script>

スクリプトを記述する場所は、</body>の直前でOKです。

あとがき

非常にシンプルなスクリプトで、実装方法も簡単ですね。

フォーム内で文字数制限をしている場合は、ぜひ導入をご検討ください。