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

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

カスタマイズ HTML, CSS, JavaScript
2021/01/05
8
vanillaice (Akira)
vanillaice (Akira)
初心者向けVanillaJSTipsJavaScriptコメント欄

あけましておめでとうございます(2021) ('0')/

FC2ブログの「コメント文字数制限」機能を利用している方向け記事です。利用していない方には全く関係の無い記事。

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

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

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

主旨

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

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

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

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

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

入力制限の仕様と注意点

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

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

アプローチ

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

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

サンプル

残り文字数:

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

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

コード

html, CSS, 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でした。それではワタクシまた地中深く潜りますのでお返事等遅くなると思います。今年もよろしくお願いしますー :)

Related post

Comments  8

-
2021/01/06 (Wed) 10:09

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2021/01/06 (Wed) 15:20

To 文字数制限の件 内緒さん

こんにちは。

FC2ブログに限らず、例えばはてなだとかwordpressにもあるはずなんですが、そのサービスでしか効力のない特殊な「変数」というのがあります。主に条件付や判別に用いますが、今回関連しているのは「ページ種の判別」です。
単純に
<script>〜</script>
と書いてしまうと全てのページで実行されてしまうんですね。でもコメント欄というのは「個別記事」と「コメント編集」の2つのページに限定されているので、それ以外のページで実行させる必要が無いわけです。
なのでページ種を特定する変数で囲って、それに合致しないページでは記載(htmlへのデータ出力)自体を行わない(サーバーサイドでそのように処理する)、という流れです。

で、FC2ではページ種の絞り込みに「除外」と「特定」の2つの方法があって、除外の方は
not xxx pege (then) not yyy page (then) not zzz page〜
というやり方です。特定の方は
xxx page
yyy page
zzz page
という感じになりますね。

そして組み合わせで行くと最終的にこうなるよ、除外ではなく特定で行うことになるよ、ということです。
ちょっとむずかしいかもしれないけれど、FC2ブログのシステム特性というだけです ^^;

-
2021/01/06 (Wed) 18:28

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2021/01/06 (Wed) 22:02

To 変数の件 内緒さん

こんばんは。

そういうことだったんですね。といっても私もちゃんと理解できているかどうか(笑)

> JSを書く場合は、たとえ同じコードでも〜

JSに限らずhtmlでもそうなんですが、変数の「除外」「特定」は使い方の考え方が違うというか。
正式名称がわからないので便宜上「exclude」「include」として、

Aページ
Bページ
Cページ
があるとする。そしてhtmlが
<div>xxx</div>
だとします。

とあるとすると、全体ABCから
<!--not_A--><!--not_B--><div>xxx</div><!--/not_B--><!--not_A-->
と書くと
not A, and then, not B
なのでつまり ABC - A - B = C ですね。全体からAとBを除外して結果Cページのみhtmlが書き出されます。

特定の場合は
<!--A--><div>xxx</div><!--/A-->

こうですが、この場合は全体を見ずにAページのみで書き出されます。
結果は同じですが方法が違う、ということですね。

で、FC2ブログの除外変数は
<!--not_index_area--> --- インデックス(TOPページ最初の1ページ目)ではない
<!--not_permanent_area--> --- 個別記事ではない
<!--not_category_area--> --- カテゴリではない
<!--not_edit_area--> --- コメント編集ではない
<!--not_tag_area--> --- タグではない
<!--not_titlelist_area--> --- 前記事一覧ではない

とこれだけのページexclude変数がありますが、注目すべきは <!--not_permanent_area--> です。
これは「個別記事ではない」を意味します。
今回のJSは「個別記事」「コメント編集」のページで必要なので、excludeでは組み合わせることができないんですね。
そのためexcludeではくincludeでエリア別2度の記載を行う、という方法になります。

そして多分ここだろうと思うんですが。includeは「only」の意味なので
<!--A--><!--B--><div>xxx</div><!--/B--><!--/A-->

includeは「only」なのですから「only A besides only B」
これは物理的にも無理(笑)
include変数で挟んでも「not only A but B」にはならない、ということです。
この説明で合ってるかな ^^;

-
2021/01/07 (Thu) 07:31

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2021/01/07 (Thu) 17:09

To 変数の件 内緒さん

こんにちは。
合っててよかったです(笑)

そうですね。includeの場合はひとつ利用した時点で「only」が確定しますので、別のincludeと同時に利用することができないんです。
お役に立てたのであれば幸いです :)

-
2021/02/02 (Tue) 17:39

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2021/02/03 (Wed) 18:42

To アナウンスの件 内緒さん

こんにちは。

先回と併せお返事遅くなってしまいました (*_ _)
全部ではないですし変更された部位もありますが、概ね適用されているようですね。
こちらこそいつもありがとうございます :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)