이벤트 핸들러 없이 HTML의 TextAreas에 문자 제한을 적용하는 방법은 무엇입니까?

JavaScript를 사용하여 HTML에서 TextArea 문자 제한 시행

HTML maxlength 속성이 제공하는 기능을 확장하여 JavaScript는 자동으로 텍스트 영역에 문자 제한을 적용합니다. 수동 이벤트 처리의 필요성을 제거함으로써 이 접근 방식은 입력 제한을 적용하는 간편하고 효율적인 방법을 제공합니다.

이벤트 핸들러 없이 Maxlength 적용

제한에 대한 기존 접근 방식 텍스트 영역 문자에는 onkeypress 또는 onkeyup과 같은 이벤트 핸들러 사용이 포함됩니다. 그러나 여러 텍스트 영역에 대한 제한을 지정해야 할 때 이는 지루한 일이 됩니다.

JavaScript는 명시적인 이벤트 처리를 우회하는 보다 우아한 솔루션을 허용합니다.

<code class="javascript">window.onload = function() {
  // Retrieve all text areas on the page
  var txts = document.getElementsByTagName('TEXTAREA');

  // Loop through each text area
  for(var i = 0, l = txts.length; i < l; i++) {
    // If the textarea has a valid maxlength attribute (numeric value)
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {
      // Define a function to handle maxlength enforcement
      var func = function() {
        var len = parseInt(this.getAttribute("maxlength"), 10);

        // Check if the input length exceeds the limit
        if(this.value.length > len) {
          // Alert the user and truncate the input
          alert('Maximum length exceeded: ' + len);
          this.value = this.value.substr(0, len);
          return false;
        }
      }

      // Assign the function to the onkeyup and onblur events
      txts[i].onkeyup = func;
      txts[i].onblur = func;
    }
  };
};</code>

구현 세부 정보

• window.onload: 페이지가 로드되면 스크립트를 실행합니다.
• getElementsByTagName: page.
• 정규식 테스트: maxlength 속성이 유효한 숫자 값인지 확인합니다.
• func: 입력이 유효한지 확인하는 함수를 정의합니다. 길이가 최대 길이를 초과하고 필요한 경우 입력을 자릅니다.
• 이벤트 처리: 유효한 maxlength 속성이 있는 각 텍스트 영역에 대한 onkeyup 및 onblur 이벤트에 func 함수를 할당합니다.

혜택

• 자동 적용: 각 텍스트 영역에 대한 수동 이벤트 처리가 필요 없이 글자 수 제한이 자동으로 적용됩니다.
• 구현 용이성: 제공된 스크립트는 여러 텍스트 영역에 걸쳐 최대 길이를 적용하는 프로세스를 단순화합니다.
• 모듈식 접근 방식: 최대 길이 적용 논리는 기능을 사용하여 쉽게 재사용하거나 맞춤 설정할 수 있습니다.

위 내용은 이벤트 핸들러 없이 HTML의 TextAreas에 문자 제한을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!