文字数カウント

a-blog cmsでは、入力欄の文字数をカウントする機能が実装されています。（Ver. 2.0.0より）

デモ

0 / 10

デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

//-----------
// input count up
countupMark     : '.js-countup',
countupMarkOver : 'acms-admin-text-danger',

---

---

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.countupMark = '.js-countup-sample';
  ACMS.Config.countupMarkOver = 'countover';
});

HTMLとCSSの編集

HTML

「data-label-target」でカウント数のラベルを指定します。また「data-max」で制限文字数を指定できます。

<textarea name="demo_area" title="" cols="20" class="acms-form-width-3quarters js-countup" data-label-target=".js-countup-demo_area" data-max="10"></textarea>
<p><span class="js-countup-demo_area">0</span> / <span>10</span></p>

CSS

countupMarkOverで指定したクラスを設定します

.countover {
    color: #990000;
}

---