JavaScript를 사용하여 텍스트 영역에서 문자 제한 시행

HTML 양식으로 작업할 때 사용자가 텍스트 영역에 입력할 수 있는 문자 수를 제한하는 것이 중요한 경우가 많습니다. 요소는 maxlength 속성을 제공하지만 항상 이 기능을 구현하는 가장 편리한 방법은 아닙니다.

JavaScript로 최대 길이 에뮬레이션

maxlength 속성을 수동으로 설정하는 대신 JavaScript를 사용하여 동일한 효과를 얻기 위해 사용됩니다. 한 가지 접근 방식은 onkeypress 및 onkeyup과 같은 이벤트 핸들러를 사용하여 텍스트 영역 값의 길이를 모니터링하고 이에 따라 입력을 제한하는 것입니다. 그러나 이 방법을 사용하려면 각 텍스트 영역에 대해 이벤트 처리 코드를 반복해야 합니다.

자동 길이 적용

문자 제한 적용 프로세스를 자동화하려면 더 우아한 솔루션은 다음을 평가하는 JavaScript 코드를 사용하는 것입니다. 각 텍스트 영역 요소의 maxlength 속성을 동적으로 처리합니다. 이 접근 방식에는 다음 단계가 포함됩니다.

1. 텍스트 영역 식별: document.getElementsByTagName('TEXTAREA')를 사용하여 문서의 모든 텍스트 영역 목록을 검색합니다.
2. 최대 길이 속성 확인: 각 텍스트 영역에 대해 유효한 값(0보다 큰 숫자)을 가진 최대 길이 속성이 있는지 확인합니다.
3. 익명 함수 만들기 : 텍스트 영역의 길이를 확인하고 제한이 초과되면 경고를 표시하는 익명 함수를 정의합니다.
4. 이벤트 핸들러 할당: 익명 함수를 onkeyup 및 onblur 이벤트로 할당합니다. 텍스트 영역에 대한 핸들러. 이러한 이벤트는 사용자가 텍스트 영역을 입력하거나 종료할 때마다 트리거되어 길이 유효성 검사를 요청합니다.