[Javascript] input 박스에 영어만 입력되도록 하는 2가지 방법

 

1. oninput 이벤트, 정규식, replace() 함수 사용하기
2. pattern 속성 적용하기

 

1. oninput 이벤트, 정규식, replace() 함수 사용하기

(JS, HTML 탭을 클릭하여 소스코드를 확인하세요)

 

이 코드는 사용자가 알파벳이 아닌 다른 값을 입력하면 아예 입력이 되지 않습니다.

input에 사용자가 값을 입력하면 handleOnInput 함수를 실행시키고,

이 함수는 사용자가 입력한 값을 replace함수와 정규식을 활용하여 

입력한 값에 알파벳이 아닌 문자가 있는 경우 공백으로 변환시켜서 input에 다시 넣어줍니다.

 

 

2. pattern 속성 적용하기

(CSS, HTML 탭을 클릭하여 소스코드를 확인하세요)

 

이 코드에서는 'pattern' 속성에 정규식을 적용하였습니다.

위 코드는 사용자가 알파벳이 아닌 값을 입력하고,

'제출(submit)' 버튼을 클릭하면 메세지를 출력하고, submit을 제한합니다.

 

또한, CSS에 'input:invalid' 속성을 적용하면

사용자가 패턴에 맞지 않는 값을 입력할 경우

CSS를 변경하여 '제출' 버튼 클릭전에도 사용자에게 메세지를 줄 수 있습니다.

 

---

 

이 외에도 input 박스에 숫자만 입력하는 방법은 다음 포스팅을 참조하세요.

[Javascript] input 박스에 숫자만 입력되도록 설정하는 4가지 방법