input 태그 입력 가능 문자 길이 제한 방법

HTML의 input 태그에서 입력 가능한 문자의 길이를 제한하려면 maxlength 속성을 사용할 수 있습니다. maxlength 속성에는 입력 가능한 최대 문자 수를 지정합니다.

따라서, input 태그에서 입력 가능한 문자의 길이를 20자로 제한하려면, 다음과 같이 maxlength 속성에 **20**을 지정합니다.

<input type="text" maxlength="20">

위의 코드에서 maxlength 속성에 **20**을 지정하면, 사용자가 입력하는 문자열의 길이가 20자리 이상이 되면 더 이상 입력되지 않습니다. 따라서, 20자리 이상의 입력을 방지할 수 있습니다.

또는, JavaScript를 사용하여 입력 가능한 문자열의 길이를 제한할 수도 있습니다. 이때는 maxlength 속성을 사용하지 않고, oninput 이벤트를 이용하여 입력된 문자열의 길이를 검사하고, 필요에 따라 문자열의 일부를 잘라내는 등의 처리를 할 수 있습니다.

예를 들어, 다음과 같이 input 태그에서 입력 가능한 문자열의 길이를 10자로 제한하고, oninput 이벤트를 등록하여 입력된 문자열의 길이를 검사하는 JavaScript 코드를 작성할 수 있습니다.

<input type="text" oninput="if (this.value.length > 10) this.value = this.value.slice(0, 10);">

위의 코드에서 oninput 속성에 **if (this.value.length > 10) this.value = this.value.slice(0, 10);**을 지정하면, 사용자가 입력하는 문자열의 길이가 10자리를 초과하면 입력된 문자열의 일부를 자르고, 10자리 이하로 입력되도록 합니다.