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