[javascript] 입력 필드에 입력 제한을 설정하는 방법은?

05 Dec 2023

javascript

최대 길이 제한:
```
<input type="text" maxlength="10">
```
이렇게 하면 입력 필드에 최대 10자까지 입력할 수 있습니다.
숫자만 입력 허용:
```
<input type="number" pattern="[0-9]*">
```
이렇게 하면 입력 필드에는 숫자만 입력할 수 있습니다.
정규식 사용:
```
<input type="text" pattern="[a-zA-Z0-9]+" required>
```
이 예시에서는 알파벳과 숫자만 허용하며, 필수 입력 필드입니다.

JavaScript로 입력 제한 설정:

const input = document.querySelector('input');
input.addEventListener('input', function() {
  if (this.value.length > 10) {
    this.value = this.value.slice(0, 10);
  }
});

이렇게 하면 JavaScript를 사용하여 입력 필드에 최대 길이 제한을 설정할 수 있습니다. 이 예시에서는 10자로 제한됩니다.

참고 자료:

MDN Web Docs - Input element