웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
다양한 글을 올리는 웹이즈프리입니다 ~ 이전 글들을 확인해보니 input 태그를 사용하는 경우 한글 입력을 막는 방법이 없더군요~ 이와 관련하여 input 사용시 한글 입력을 막는 방법과 효과적인 방법은 없는지 알아보았습니다.
# input 태그에 한글 입력을 막는 방법
제목은 한글 입력만을 막는 방법이지만 코드를 조금만 수정하면 input 태그에 원하는 텍스트만 입력하는 방법이 되겠습니다. 일단 한글이나 기타 특정 언어를 막는 경우는 언제일까요?
@ 한글이나 기타 특정 텍스트 입력을 막는 경우는 언제일까?
여러가지가 있겠지만 사용자 ID나 이벤트 코드만 입력하는 경우가 대표적인 경우입니다. 즉 불필요한 텍스트 입력을 아예 차단 시키기 위한 목적으로 사용되죠. 다시 말해 필수적인 코드는 아니지만 사용자의 실수를 줄여줄 수 있다는 장점이 있겠습니다~ 또한 서버로 잘못된 정보를 전송하지 않도록 미리 대비를 하기 위한 방법이기도 하겠습니다.
그렇다면 어떻게 하면 input에서 한글 입력을 막을 수 있을까요? 방법을 아래와 같이 다양합니다.
일단 1번 방법의 경우 가장 간단할 수 있습니다. input 태그에 사용할 수 있는 pattern 어트리뷰트를 사용하면 되죠. 방법도 간단합니다. pattern="정규표현식"을 사용하면 모든 과정이 끝나기 때문입니다.
<input pattern="[a-zA-Z0-9]" />
하지만 1번 방법은 단점이 있는데요 ~ 바로 키를 누를때마다다 발생하지 않고 submit하는 딱 한 번만 발생하기 때문에 실시간으로 입력키를 확인할 수 없다는 단점이 있습니다. 그래서 이 방법은 넘어가고 다음 방법을 알아봅니다.
그 다음 방법으로 2, 3번의 방법이 있으며 둘 다 비슷한 방법입니다. 이 둘의 차이점은 미리 차단하느냐 ~ 아니면 일단 입력 받은 후 불필요한 값을 제거하느냐의 차이입니다. 참고로 입력 받은 후 제거하여도 input 태그 내부의 키보드 커서 위치는 blur되지 않습니다.
이 두 가지 방법 모두 알아보도록 하겠습니다. 먼저 2번 미리 입력된 키를 확인하는 방법입니다.
! input 태그에 키 이벤트를 사용하여 입력된 키만 허용하는 방법
아래는 html 코드입니다. onkeyup은 키보드 입력시 chkCharCode() 함수를 호출합니다.
여기서 함수 chkCharCode()의 역할은 간단합니다. 입력 받은 키 코드값을 확인하고 값이 한글인 경우나 기타 원치 않는 값이라면 이벤트를 수행하지 않으면 됩니다. 아래는 스크립트로 호출될 함수 chkCharCode()의 소스입니다. 예제 코드이므로 한글만 허용 불가한 코드는 아닙니다. 숫자, 영문, 키패드, 스페이스, 백스페이스, 대시기호만 허용하는 예제입니다.
위 코드를 살펴보겠습니다. 입력 받은 키 값은 keyCode를 사용해야 한글이나 영문 등을 확인할 수 있습니다. value를 사용하면 한글 ㄴ(니은)과 s 모두 s로 출력되기 때문이죠.
!! 중요 ~ onkeypress를 사용할 것
그리고 이벤트 리스너의 경우 onkeypress를 사용해야 합니다. onkeyup 또는 onkeydown의 경우 키 입력을 막기 위한 코드 event.preventDefault() 또는 return을 수행하여도 키 입력을 막을 수 없습니다. 이 때문에 onkeypress 리스너를 사용해야 하니 꼭 알아두세요. 이 세 가지 이벤트리스너는 모두 조금씩 차이가 있습니다.
위 예제는 잘 동작하지만 치명적인 문제점이 있습니다. 바로 한글 입력시에는 키 입력이 되지 않아야 하지만 한글인 경우에는 키 입력이 되는 문제가 있습니다... 이런 이유로 이 방법도 100% 원하는 기능 구현이 어렵습니다. 만약 제한적인 기능 사용으로 충분하다면 이 방법을 적절하게 사용하는 것도 방법입니다. 하지만 무조건 한글이 입력되지 않아야 한다면 다음 방법인 3번 방법을 알아볼 차례입니다.
마지막 방법입니다. 이 방법은 일단 input에서 입력을 받고 그 뒤 입력된 값에 허용되지 않은 문자는 정규표현식을 사용하여 문자열에서 제외하는 replace() 함수를 실행하는 방법입니다. 순서대로 나열하면 다음과 같습니다.
- input에서 키 이벤트리스너 onkeyup을 사용하여 콜백 함수를 실행
- input에 입력된 내용 중 허용 이외의 문자열이 있는 지 확인
- 허용되지 않는 글은 replace()를 사용하여 모두 제거
위의 방법은 한글이나 기타 허용되지 않은 글은 바로 바로 삭제되므로 가장 원하는 기능과 동일하게 구현 가능한 방법입니다. 다만 키가 입력된 후 삭제되므로 깜박임이 존재합니다. 하지만 input value를 업데이트해도 input에 위치한 커서와 포커스는 계속 유지되므로 괜찮은 방법이라 할 수 있습니다.
방법은 2번 방법과 거의 동일합니다. 다만 이벤트 리스너를 onkeyup으로 변경하는 부분이 다릅니다.
다음의 스크립트는 정규표현식의 test() 함수를 사용하여 입력된 값이 이상한 경우에만 그 부분을 지우는 replace() 함수를 동작하도록 합니다.
여기서 위에서 사용된 정규식은 다음과 같죠.
/[^0-9a-zA-Z]/g
위 정규식을 간단히 설명하면 ^ 기호는 반대되는 패턴을 의미합니다. 즉 0-9 숫자와 a-zA-Z 대소문자 영문이 아닌 모든 값을 가리키게 됩니다.
! 위 예제 실제로 구현해보기
실제 예제를 동작하기 위해서 아래에 직접 구현해 보았습니다. 실제로 한글을 입력해보시면 어떻게 동작하는지 아실 수 있습니다.
>> 한글 입력 불가한 input 입력폼 숫자 영문만 가능
실제로 입력해보면 이 외의 패턴은 모두 제거되게 됩니다. 키를 누르고 뗀 후에 실행되죠~ 그런데 실행해보니 예기치 못한 예외사항이 있습니다.
[ 예외사항 정보 ]
예외사항은 바로 한/영 자판을 클릭할 경우입니다. 한글을 입력하면 사라지는데 그 후 이 자판을 클릭하면 사라졌던 한글이 다시 나타나는 문제가 발생합니다... 원인을 생각해보니 한글의 경우 자음과 모음에 따라 달라지기 때문으로 생각됩니다. 즉 이 후에 한/영 키를 누르게 되면 먼저 입력한 값이 나중에 입력한 값과 상관이 없어지도록 변경하는 과정이 일어나는데 이 때문에 한글이 다시 생성되는 것 같습니다. 이 후 다른 키를 누르면 당연히 사라지기 때문에 사소한 이슈일 수도 있으므로 상황에 따라 처리하면 될 것 같습니다.
추가로 한영 자판은 브라우저에서 event가 발생하지 않습니다. 이 때문에 event 객체를 사용하여 처리하는 것이 어렵더군요 ~ 위 이슈를 간단하게 해결하지 못하는 이유는 이것입니다.
여기까지 자바스크립트를 사용하여 input 태그에 한글 입력을 막는 방법에 대하여 알아보았습니다.
"Input 태그 입력폼에서 한글 입력을 막으려면?"
# input 태그에 한글 입력을 막는 방법
제목은 한글 입력만을 막는 방법이지만 코드를 조금만 수정하면 input 태그에 원하는 텍스트만 입력하는 방법이 되겠습니다. 일단 한글이나 기타 특정 언어를 막는 경우는 언제일까요?@ 한글이나 기타 특정 텍스트 입력을 막는 경우는 언제일까?
여러가지가 있겠지만 사용자 ID나 이벤트 코드만 입력하는 경우가 대표적인 경우입니다. 즉 불필요한 텍스트 입력을 아예 차단 시키기 위한 목적으로 사용되죠. 다시 말해 필수적인 코드는 아니지만 사용자의 실수를 줄여줄 수 있다는 장점이 있겠습니다~ 또한 서버로 잘못된 정보를 전송하지 않도록 미리 대비를 하기 위한 방법이기도 하겠습니다.
그렇다면 어떻게 하면 input에서 한글 입력을 막을 수 있을까요? 방법을 아래와 같이 다양합니다.
- 1. input 태그에 pattern 어트리뷰트를 사용하는 방법
- 2. input 태그에 키 이벤트를 사용하여 입력된 키만 허용하는 방법
- 3. input 태그에 키 이벤트를 사용하여 입력된 키 이 외의 텍스트는 삭제하는 방법
일단 1번 방법의 경우 가장 간단할 수 있습니다. input 태그에 사용할 수 있는 pattern 어트리뷰트를 사용하면 되죠. 방법도 간단합니다. pattern="정규표현식"을 사용하면 모든 과정이 끝나기 때문입니다.
<input pattern="[a-zA-Z0-9]" />
하지만 1번 방법은 단점이 있는데요 ~ 바로 키를 누를때마다다 발생하지 않고 submit하는 딱 한 번만 발생하기 때문에 실시간으로 입력키를 확인할 수 없다는 단점이 있습니다. 그래서 이 방법은 넘어가고 다음 방법을 알아봅니다.
그 다음 방법으로 2, 3번의 방법이 있으며 둘 다 비슷한 방법입니다. 이 둘의 차이점은 미리 차단하느냐 ~ 아니면 일단 입력 받은 후 불필요한 값을 제거하느냐의 차이입니다. 참고로 입력 받은 후 제거하여도 input 태그 내부의 키보드 커서 위치는 blur되지 않습니다.
이 두 가지 방법 모두 알아보도록 하겠습니다. 먼저 2번 미리 입력된 키를 확인하는 방법입니다.
! input 태그에 키 이벤트를 사용하여 입력된 키만 허용하는 방법
아래는 html 코드입니다. onkeyup은 키보드 입력시 chkCharCode() 함수를 호출합니다.<input
type="text"
onkeypress="chkCharCode(event)" />
type="text"
onkeypress="chkCharCode(event)" />
여기서 함수 chkCharCode()의 역할은 간단합니다. 입력 받은 키 코드값을 확인하고 값이 한글인 경우나 기타 원치 않는 값이라면 이벤트를 수행하지 않으면 됩니다. 아래는 스크립트로 호출될 함수 chkCharCode()의 소스입니다. 예제 코드이므로 한글만 허용 불가한 코드는 아닙니다. 숫자, 영문, 키패드, 스페이스, 백스페이스, 대시기호만 허용하는 예제입니다.
chkCharCode(event) {
const keyCode = event.keyCode;
const isValidKey = (
(keyCode >= 48 && keyCode <= 57) || // Numbers
(keyCode >= 97 && keyCode <= 122) || // Numbers, Keypad
(keyCode >= 65 && keyCode <= 90) || // Alphabet
(keyCode === 32) || // Space
(keyCode === 8) || // BackSpace
(keyCode === 189) // Dash
);
if (!isValidKey) {
event.preventDefault();
return false;
}
};
const keyCode = event.keyCode;
const isValidKey = (
(keyCode >= 48 && keyCode <= 57) || // Numbers
(keyCode >= 97 && keyCode <= 122) || // Numbers, Keypad
(keyCode >= 65 && keyCode <= 90) || // Alphabet
(keyCode === 32) || // Space
(keyCode === 8) || // BackSpace
(keyCode === 189) // Dash
);
if (!isValidKey) {
event.preventDefault();
return false;
}
};
위 코드를 살펴보겠습니다. 입력 받은 키 값은 keyCode를 사용해야 한글이나 영문 등을 확인할 수 있습니다. value를 사용하면 한글 ㄴ(니은)과 s 모두 s로 출력되기 때문이죠.
!! 중요 ~ onkeypress를 사용할 것
그리고 이벤트 리스너의 경우 onkeypress를 사용해야 합니다. onkeyup 또는 onkeydown의 경우 키 입력을 막기 위한 코드 event.preventDefault() 또는 return을 수행하여도 키 입력을 막을 수 없습니다. 이 때문에 onkeypress 리스너를 사용해야 하니 꼭 알아두세요. 이 세 가지 이벤트리스너는 모두 조금씩 차이가 있습니다.
"하지만 이 방법도 완전하지는 않다..."
위 예제는 잘 동작하지만 치명적인 문제점이 있습니다. 바로 한글 입력시에는 키 입력이 되지 않아야 하지만 한글인 경우에는 키 입력이 되는 문제가 있습니다... 이런 이유로 이 방법도 100% 원하는 기능 구현이 어렵습니다. 만약 제한적인 기능 사용으로 충분하다면 이 방법을 적절하게 사용하는 것도 방법입니다. 하지만 무조건 한글이 입력되지 않아야 한다면 다음 방법인 3번 방법을 알아볼 차례입니다.
! input 태그에 키 이벤트를 사용하여 입력된 키 이 외의 텍스트는 삭제하는 방법
마지막 방법입니다. 이 방법은 일단 input에서 입력을 받고 그 뒤 입력된 값에 허용되지 않은 문자는 정규표현식을 사용하여 문자열에서 제외하는 replace() 함수를 실행하는 방법입니다. 순서대로 나열하면 다음과 같습니다.
- input에서 키 이벤트리스너 onkeyup을 사용하여 콜백 함수를 실행
- input에 입력된 내용 중 허용 이외의 문자열이 있는 지 확인
- 허용되지 않는 글은 replace()를 사용하여 모두 제거
위의 방법은 한글이나 기타 허용되지 않은 글은 바로 바로 삭제되므로 가장 원하는 기능과 동일하게 구현 가능한 방법입니다. 다만 키가 입력된 후 삭제되므로 깜박임이 존재합니다. 하지만 input value를 업데이트해도 input에 위치한 커서와 포커스는 계속 유지되므로 괜찮은 방법이라 할 수 있습니다.
방법은 2번 방법과 거의 동일합니다. 다만 이벤트 리스너를 onkeyup으로 변경하는 부분이 다릅니다.
<input
type="text"
onkeyup="chkCharCode(event)" />
type="text"
onkeyup="chkCharCode(event)" />
다음의 스크립트는 정규표현식의 test() 함수를 사용하여 입력된 값이 이상한 경우에만 그 부분을 지우는 replace() 함수를 동작하도록 합니다.
chkCharCode(event) {
const regExp = /[^0-9a-zA-Z]/g;
const ele = event.target;
if (regExp.test(ele.value)) {
ele.value = ele.value.replace(regExp, '');
}
};
const regExp = /[^0-9a-zA-Z]/g;
const ele = event.target;
if (regExp.test(ele.value)) {
ele.value = ele.value.replace(regExp, '');
}
};
여기서 위에서 사용된 정규식은 다음과 같죠.
/[^0-9a-zA-Z]/g
위 정규식을 간단히 설명하면 ^ 기호는 반대되는 패턴을 의미합니다. 즉 0-9 숫자와 a-zA-Z 대소문자 영문이 아닌 모든 값을 가리키게 됩니다.
! 위 예제 실제로 구현해보기
실제 예제를 동작하기 위해서 아래에 직접 구현해 보았습니다. 실제로 한글을 입력해보시면 어떻게 동작하는지 아실 수 있습니다.>> 한글 입력 불가한 input 입력폼 숫자 영문만 가능
<div class="test">
<input onkeyup="chkCharCode(event)" style="height: 40px;" />
</div>
<script>
window.chkCharCode = function(event) {
const regExp = /[^0-9a-zA-Z]/g;
const ele = event.target;
if (regExp.test(ele.value)) {
ele.value = ele.value.replace(regExp, '');
}
};
</script>
<input onkeyup="chkCharCode(event)" style="height: 40px;" />
</div>
<script>
window.chkCharCode = function(event) {
const regExp = /[^0-9a-zA-Z]/g;
const ele = event.target;
if (regExp.test(ele.value)) {
ele.value = ele.value.replace(regExp, '');
}
};
</script>
실제로 입력해보면 이 외의 패턴은 모두 제거되게 됩니다. 키를 누르고 뗀 후에 실행되죠~ 그런데 실행해보니 예기치 못한 예외사항이 있습니다.
[ 예외사항 정보 ]
예외사항은 바로 한/영 자판을 클릭할 경우입니다. 한글을 입력하면 사라지는데 그 후 이 자판을 클릭하면 사라졌던 한글이 다시 나타나는 문제가 발생합니다... 원인을 생각해보니 한글의 경우 자음과 모음에 따라 달라지기 때문으로 생각됩니다. 즉 이 후에 한/영 키를 누르게 되면 먼저 입력한 값이 나중에 입력한 값과 상관이 없어지도록 변경하는 과정이 일어나는데 이 때문에 한글이 다시 생성되는 것 같습니다. 이 후 다른 키를 누르면 당연히 사라지기 때문에 사소한 이슈일 수도 있으므로 상황에 따라 처리하면 될 것 같습니다.
추가로 한영 자판은 브라우저에서 event가 발생하지 않습니다. 이 때문에 event 객체를 사용하여 처리하는 것이 어렵더군요 ~ 위 이슈를 간단하게 해결하지 못하는 이유는 이것입니다.
여기까지 자바스크립트를 사용하여 input 태그에 한글 입력을 막는 방법에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
