Bootstrap MaxLengthで警告色表示を実装する

デモ＆ソースコード

これを見てやりたいことを察してください

要件

• 現在の入力値が、入力最大値の75%を超過した時、入力欄と文字数カウンタの色を黄色にする
• 現在の入力値が、入力最大値を超過した時、入力欄と文字数カウンタの色を赤色にし、送信できないようにする

必要なもの

• jQuery
• Bootstrap
• Bootstrap MaxLength
• (AdminLTE3) ※デモと同じ見た目を再現する場合

知っておくべきこと

• 属性の指定は「data-maxlength」を使用してください。「maxlength」属性ではありません

公式ドキュメントにも書いてましたが一応。

● OK!!

<input type="text" id="name" name="name" class="form-control" value="" data-maxlength="20">

● ダメ～～!!

<input type="text" id="name" name="name" class="form-control" value="" maxlength="20">

• 本デモでは、入力最大値ちょうどの時の色を黄色に変更しています

Bootstrap MaxLengthは、入力最大値ちょうどの時、文字数カウンタの色を赤色にします。
ただし、その状態でも送信可能です。

私は入力最大値の時に赤色になるのが気に入らなかったので、強制的に黄色に変更しています。

    else if(nowLen === maxLen){ // 現在の入力値が最大値と同じとき
      $(this).addClass('is-warning');
      $(this).removeClass('is-invalid');

      $('.bootstrap-maxlength').removeClass('text-muted');
      $('.bootstrap-maxlength').addClass('text-warning'); // ★★★これ★★★
      $('.bootstrap-maxlength').removeClass('text-danger'); // ★★★これ★★★
    }

Bootstrap MaxLengthの本来の挙動ではないのでご注意ください。

既知のバグ

• 複数の入力欄にdata-maxlengthを設定した場合、それぞれの文字数カウンタの色がバグる(可及的速やかに直します)
• 修正しました
• テキストエリアの改行すると文字数ごとのクラス変更が一致しない(たぶん直します)
• 修正しました

なぜ作ったか

公式に私がしたいことを実現するオプションがなかったので。。

一応チケット起票しましたが、
古いプラグインですし公式対応してくれるかは望み薄な気がする。

文字数ギリギリで色変更とか結構よくありそうな話だと思うんですが、
皆さんはどうやって実現してるんですか？
もっといいライブラリとかあったら教えてちょ

おまけ

私が開発中のプロジェクトの場合、
一つの入力フォームの中に、普通のテキストエリア欄と、
HTMLエディタ欄(TinyMCE)が一つずつ、一緒に存在するケースがあります。

TinyMCE側には標準で文字数カウンタがあるので、
テキストエリア欄にだけBootstrap MaxLengthを使っていますが、ここで問題があり。

TinyMCEの読み込みは、ページ読み込み完了よりさらに後になる関係で、
TinyMCEが表示されたらテキストエリア欄の文字数カウンタの位置がずれてしまうのです。

なので、TinyMCEが読み込まれた後に、文字数カウンタの表示位置調整を行います。
普通のテキストエリア欄やTinyMCEのHTMLエディタ欄が複数あったらどうなるかはしらね。

/**
 * TinyMCE configurations
 */
function initTinyMCE(elem)
{
  var myElem = elem !== undefined ? elem : "textarea.html_field";
  var options = {
    selector : myElem,
    setup: function(editor){
      editor.on('init', function(e){ // when tinymce is ready
        // 文字数カウンタの場所がtinyMCEの出現によりずれるので再調整する
        $('textarea[data-maxlength]').trigger('maxlength.reposition');
      });
    }
  };

  tinymce.init(options);
}

initTinyMCE();