「コメント文字数制限」残り文字数を表示するカスタマイズ

【ブログ】コメント文字数制限の設定ができるようになりました

平素は、FC2(fc2.com)をご利用いただき、誠にありがとうございます。FC2ブログ（blog.fc2.com）にコメント文字数制限の設定ができるようになりました！「コメントの文字数制限」を「制限する」に設定すると、訪問者が書き込めるコメントの長さを最大500文字に制限できます。【設定方法】「環境設定＞ブログの設定＞コメント設定」に「コメントの文字数制限 」の項目があります。「制限する」を選択すると、コメントを受け付ける最...

fc2information.blog.fc2.com

主旨

新機能の「コメント数制限」を改めて調べてみたんですが、文字数に制限をかけていることが傍目にはわからない という仕様ですね (´・ω・｀)
何かしらの「お知らせ・メッセージ」的なものが自動で追加されるのかなぁ、と思っていたのですが。

入力したあと「送信」ボタンをクリックして初めて「コメント本文に入力できる文字数は、500文字までです。(xxx文字)」とブラウザアラートが表示されます。
* xxxは入力文字数です。

そんなん今言われても… (;`ｰ´)o
って感じですよね。これをどうにかしようじゃないか、という話です。

コメント欄の付近に「500文字までですよ」と書いておけば事足りそうでもありますが、カウントしてあげないと不親切ですよね。自分で数えながら入力しろと？みたいな。

現段階でユーザー各個がこの機能を利用しているかいないかの判別ができませんので、テンプレートに予め仕込んでおくことができません。なので「個人カスタマイズ」として自主的にテンプレートを編集する、という形の提供です。

入力制限の仕様と注意点

1. 管理人は制限を受けない(ログイン状態であることが絶対条件)
2. コメントを入力するページは「個別記事」と「コメント編集」ページのふたつ(特殊なテンプレートでない限り)
3. 改行を1文字としてカウント

入力文字数をカウントするだけ、という場合は至って簡単なJSで済むんですが、「編集」を見落としてはいけませんので、ページがロードされた時にカウントし、かつ、初期入力時及び入力内容が変更された時にもカウント処理を行う必要があります。改行がカウントされる、という点も要注意。

アプローチ

1. 入力された文字数を表示する = 現在の文字数は xxx です。
2. 制限を迎えたら強制的に超過分をカットする
3. 差分を計算し、残り文字数を表示する = 残り文字数は xxx です。

いろんな方法がありますが、今回は③を選択しています。強制カットされるとちょっと辛いですよねぇ (´・ω・｀)
超過してもちゃんと表示して、上手く文字数が収まるように自主編集したいだろうと思います。カットされちゃうとそれができない。どちらが親切かは個人の感覚によりますので、とりあえず私の選択としては③であり、その方法を掲載します。

サンプル

サンプルは20文字制限です。コメント制限は「500文字」です。あとはコメントタイトルにも「30文字」という縛りがありますが、今回そちらはスルー (´・ω・)ﾉｼ

制限を超過したら赤文字に変わります。本来はJSだけで実装できますけれども、テンプレートによってはスタイルも若干調整が要ると思いますので、スタイルについては 私が制作したテンプレートに限定 させてくださいね。第三者様作品については把握していませんので提示できない ^^;
ただしコメントフォーム周りはFC2の仕様でidやclassなど統一されているはずなので、JSコードについては汎用性があると思います。でも絶対ではないです。

コード

HTML

<div id="count_wrapper">残り文字数:<span id="count"></span></div>

上記は HTML です。挿入箇所は id="comment" で検索し、この文字列を含む要素の直下にペースト。私のテンプレートの場合は id=comment の場合もあります。要素名が textarea であることも確認してください。

<div id="comment" <textarea id="comment"

2箇所 ありますので、その双方に同じ作業を行います。ひとつは個別記事の新規コメント投稿、もうひとつは既存コメント編集です。

CSS

#count_wrapper {
  margin: 0 0 20px 0;
  font-size: .9em;
  text-align: right;
}

#count {
  margin: 0 0 0 8px;
}

こちらはテンプレートスタイルシートの末尾に追加。どのテンプレートでもこれでOKというわけではありませんので、概ねのスタイリングです。

JavaScript

<!--permanent_area-->
<script>a=document.getElementById('comment');b=document.getElementById('count');b.innerHTML=500-a.value.length;a.addEventListener('keyup',function(){c=this.value.length;b.innerHTML=500-c;b.style.color=c>500?'#f00':'currentColor';});</script>
<!--/permanent_area-->
<!--edit_area-->
<script>a=document.getElementById('comment');b=document.getElementById('count');b.innerHTML=500-a.value.length;a.addEventListener('keyup',function(){c=this.value.length;b.innerHTML=500-c;b.style.color=c>500?'#f00':'currentColor';});</script>
<!--/edit_area-->

同じコードですがFC2ブログではエリア別(ページ別)に2つ必要で統合はできませんので注意。記載位置はテンプレートhtmlの </body> の直前です。

vanilla JS(ネイティブJS)です。テンプレート内にjQueryを含む場合はjQueryの書き方がありますが、ネイティブの方が汎く使えますので今回はこちらのコードで。

まとめ

というわけで、文字数制限を「しているよ」をわかりやすくするtipsでした。それではワタクシまた地中深く潜りますのでお返事等遅くなると思います。今年もよろしくお願いしますー :)