JavaScript를 사용하여 HTML의 텍스트 영역에 최대 길이를 적용하는 종합 가이드

웹 개발에서는 텍스트에 입력되는 텍스트의 최대 길이를 제어해야 하는 경우가 많습니다. 지역. 이 시나리오에서는 여러 텍스트 영역에 maxlength 속성을 자동으로 적용해야 합니다. 이전 솔루션에서는 각 텍스트 영역에 대한 수동 이벤트 처리가 필요했지만, 반복적인 코드가 필요 없는 대체 접근 방식을 살펴보겠습니다.

해결책:

이 솔루션의 핵심은 JavaScript의 기능에 있습니다. 페이지에서 모든 텍스트 영역을 검색하고 해당 영역에 이벤트 리스너를 동적으로 추가합니다. onload 이벤트를 활용하면 로드 시 텍스트 영역을 포함하여 전체 페이지 콘텐츠에 액세스할 수 있습니다.

window.onload = function() {

이제 문서를 탐색할 수 있습니다. TEXTAREA 태그가 있는 모든 요소 검색:

var txts = document.getElementsByTagName('TEXTAREA');

다음으로 각 텍스트 영역을 반복하여 유효한 maxlength 속성이 있는지 확인합니다. maxlength 값이 숫자인지 확인하기 위해 정규 표현식을 사용합니다.

for(var i = 0, l = txts.length; i 
적격한 각 텍스트 영역에 대해 최대 길이를 확인하는 콜백 함수를 정의합니다. . 이 함수는 다음을 수행합니다.
최대 길이 속성의 값을 정수로 검색합니다.
텍스트 영역 값의 현재 길이가 최대 길이를 초과하는지 확인합니다.
초과된 경우 , 경고 메시지를 표시하고 값을 허용되는 최대 길이로 자릅니다.
var func = function() {
    var len = parseInt(this.getAttribute("maxlength"), 10);

    if(this.value.length > len) {
        alert('Maximum length exceeded: '   len);
        this.value = this.value.substr(0, len);
        return false;
    }
}
마지막으로 이 콜백 함수를 텍스트 영역의 keyup 및 Blur 이벤트 모두에 연결합니다.
txts[i].onkeyup = func;
txts[i].onblur = func;
이 포괄적인 접근 방식은 반복적인 이벤트 처리 없이 웹 페이지의 모든 적합한 텍스트 영역에 최대 길이를 자동으로 적용하기 위한 완벽한 솔루션을 제공합니다.