JavaScript를 사용하여 텍스트 영역에서 최대 텍스트 길이를 동적으로 적용하는 방법은 무엇입니까?

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

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

해결책:

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

window.onload = function() {

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

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

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

for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {

적격한 각 텍스트 영역에 대해 최대 길이를 확인하는 콜백 함수를 정의합니다. 이 함수는 다음을 수행합니다.

1. maxlength 속성 값을 정수로 검색합니다
2. 텍스트 영역 값의 현재 길이가 maxlength를 초과하는지 확인
3. 초과된 경우 , 경고 메시지를 표시하고 값을 허용되는 최대 길이로 자릅니다

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;
    }
}

마지막으로 이 콜백 함수를 텍스트 영역의 키업 및 블러 이벤트 모두에 연결합니다.

txts[i].onkeyup = func;
txts[i].onblur = func;

이 포괄적인 접근 방식은 반복적인 이벤트 처리 없이 웹 페이지의 모든 적합한 텍스트 영역에 최대 길이를 자동으로 적용하는 원활한 솔루션을 제공합니다.

위 내용은 JavaScript를 사용하여 텍스트 영역에서 최대 텍스트 길이를 동적으로 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!