[javascript] 입력 폼의 입력 글자 수 제한하기

11 Dec 2023

javascript

// 1. HTML input 요소에서 입력된 텍스트의 길이를 제한할 수 있도록 해당 요소를 찾습니다.
const inputElement = document.getElementById('input-text');

// 2. 입력된 텍스트의 길이가 특정 길이를 초과하는지 확인하고 제한합니다.
inputElement.addEventListener('input', function() {
  if (this.value.length > 100) { // 100자까지 입력 가능하도록 제한
    this.value = this.value.substring(0, 100);
  }
});

위의 코드에서는 input 요소에서 입력된 텍스트의 길이가 100자를 초과하는지 감지하고, 이를 제한하도록 설정되어 있습니다. input 이벤트는 사용자가 텍스트를 입력할 때마다 발생하므로, 사용자가 입력하는 동안 실시간으로 길이를 체크하여 제한할 수 있습니다.

텍스트 입력 폼에서 입력 글자 수를 제한하는 방법에 대해 더 알아보려면, 다음 MDN 웹 문서를 참고하시기 바랍니다.