Bootstrap 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">

    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'); // ★★★これ★★★
    }

왜 만들었는가

덤

/**
 * 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();