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

 

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

 

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

<input type="text" 
    oninput="handleOnInput(this)" />

function handleOnInput(e)  {
  e.value = e.value.replace(/[^A-Za-z]/ig, '')
}

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

 

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

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

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

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

 

 

2. pattern 속성 적용하기

<form>
  <input type="text" pattern="[A-Za-z]+">
  <input type='submit'>
</form>

input:invalid {
  border: 3px solid red;
}

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

 

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

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

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

 

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

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

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

 

---

 

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

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