Javascript를 이용하여 <input>에 영어만 입력 가능하도록 만드는 방법에 대해서 알아보겠습니다.

1. 문자 입력 시, 영어가 아닌 문자는 삭제

문자를 입력할 때 영어가 아닌 문자는 삭제하여, 영어만 입력되도록 만드는 예제입니다.

HTML

input 박스가 있고, Javascript에서 input 이벤트를 받아서 영어만 허용하도록 구현하려고 합니다.

<input type="text" id="english-input">

Javascript

input 박스의 요소를 가져와서 input에 대한 이벤트를 수신합니다. 그리고 input에 입력된 text를 가져와서 영어를 제외한 문제를 모두 제거합니다. 마지막으로 영어만 남은 문자열을 다시 input의 value에 입력합니다.

  • addEventListener("input", function(event) { ... }) : 입력 이벤트를 수신
  • document.getElementById("english-input") : input 요소 가져오기
  • englishInput.value : input에 입력된 text 가져오기
  • inputValue.replace(/[^a-zA-Z]/g, "") : inputValue의 문자열을 정규표현식으로 영어가 아닌 문자열을 모두 찾고 ""으로 변환, 즉 영어가 아닌 문자는 문자열에서 모두 삭제됨.
  • englishInput.value = englishOnly : input 요소의 텍스트 값에 englishOnly의 문자열을 설정
var englishInput = document.getElementById("english-input");
englishInput.addEventListener("input", function(event) {
  var inputValue = englishInput.value;
  var englishOnly = inputValue.replace(/[^a-zA-Z]/g, "");
  englishInput.value = englishOnly;
});

2. oninput을 이용하여 영어만 입력

위와 동일하게 정규표현식으로 영어만 입력하는 예제입니다. 대신, HTML에서 oninput을 이용하여 input 발생 시 함수가 바로 호출되도록 하여 Javascript 코드가 깔끔합니다.

HTML

input 요소를 추가하였고, oninput으로 input 발생 시 onlyEnglish 함수가 호출됩니다.

<input type="text" oninput="onlyEnglish(this)">

Javascript

아래 함수에서 inupt event는 e로 전달되며, value를 가져와서 정규표현식으로 영어가 아닌 문자는 모두 제거합니다. 그리고 다시 input의 value에 문자열을 설정합니다.

function onlyEnglish(e)  {
  var englishOnly = e.value.replace(/[^a-zA-Z]/g, "");
  e.value = englishOnly;
}