📃

【Drupal】文字数カウンター導入

2023/12/08に公開

フォームのテキストエリア項目に、「文字数のカウンター機能をつけたい。」「最大文字数の制限をかけたい。」ということありますよね。
もちろん、JavaScriptでの実装やライブラリの導入で実現ができそうですが、コントリビュートモジュールで便利なものがあったので共有します。

そもそも...最大文字数って制限できないっけ？

通常のテキストフィールドであれば、MaxLengthの設定で設定を行うことが可能です。

しかし、テキストフォーマットだと Drupal 標準の機能のみでは最大文字数を設定することができません。

テキストフォーマットとテキストフィールドの違いを簡単に...

実装といっても、モジュールを導入するのみです。
今回、利用するモジュールはMaxLength。

導入の手順をいっしょにやっていきましょうか。

プロジェクトのディレクトリがある場所で、以下のコマンドを走らせます。（インストール）

composer require 'drupal/maxlength:^2.1'

「管理メニュー」 > 「機能拡張」から MaxLength モジュールにチェックを入れて、画面下部の「インストール」ボタンを押下します。（有効化）

※ Drush を導入しているプロジェクトではdrush en maxlengthを利用。

既に、テキストフィールド・テキストフォーマットのどちらかが追加されていることが前提です。
「フォームの表示管理」にて、該当のフィールドの設定を行います。
モジュールを有効にしていると、「MaxLength Settings」の設定項目が出現します。

最大文字数を設定できます。

@limit、@remaining、@countを利用することで文字数カウンターや残りの入力文字をカウントしてくれます。
入力例

<strong>@count / @limit</strong>

保存すれば構築は完了です。

それでは、挙動を確認してみましょう。
投稿画面で実際に入力してみます。

ちゃんと文字数の制御ができているし、文字数カウンターもいい感じですね。
（ちょっと、Gif画像ではスムーズじゃないんですけどほんとはもっとさくさくです）