사용자가 입력 한 문자 수를 표시하기 위한 텍스트 영역과 일반 div 요소가 있다고 가정합니다.

https://htmldom.dev/count-the-number-of-characters-of-a-textarea 

<textarea id="message"></textarea>
<div id="counter"></div>

maxlength 속성 사용 

maxlength 속성은 사용자가 텍스트 영역에 넣을 수 있는 최대 문자 수를 설정합니다.

<textarea maxlength="200" id="message"></textarea>

문자 수를 센다 

element 값이 변경되면 트리거 되는 입력 이벤트를 처리하십시오.

const messageEle = document.getElementById('message');
const counterEle = document.getElementById('counter');

messageEle.addEventListener('input', function(e) {
    const target = e.target;

    // Get the `maxlength` attribute
    const maxLength = target.getAttribute('maxlength');

    // Count the current number of characters
    const currentLength = target.value.length;

    counterEle.innerHTML = `${currentLength}/${maxLength}`;
});

알아 둘만 한 

일반적인 실수는 키업 이벤트를 캡처하는 것입니다. 다음과 같은 경우에는 작동하지 않습니다.

• 사용자가 텍스트를 텍스트 영역으로 드래그
• 사용자는 텍스트 영역을 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 붙여 넣기를 선택합니다