한글만 입력 가능한 입력 필터링 jQuery (한글 + 영문 추가)

웹 서비스에서 사용자 입력값을 제한하는 경우는 자주 발생합니다. 특히 이름, 별명, 지역명 등 한글만 입력을 허용하고 싶은 경우에 유용한 필터링 방식이 필요합니다. 오늘은 jQuery를 사용하여 한글만 입력되도록 제한하는 코드에 대해 분석하고 활용법을 소개하겠습니다.

---

✨ 코드 설명

$(document).on('keyup focusout', '.onlyhan', function(){
    $(this).val($(this).val().replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|ᆞ|ᆢ|ㆍ|\?|]/gi,""));
});

▶ 구체

• 간각규: .onlyhan 클래스를 가진 input 요소에 대해 keyup 또는 focusout 이벤트가 발생할 때마다 실행됩니다.
• replace 정규식: 입력된 문자열에서 한글 범위 외의 문자를 제거합니다.

---

✨ 정규표현식 분석

/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|ᆞ|ᆢ|ㆍ|\?|]/gi

포함 범위:

• ㄱ-ㅎ: 초성 문자 (예: ㄱ, ㄴ, ㄷ ...)
• ㅏ-ㅣ: 모음 문자 (예: ㅏ, ㅑ, ㅓ ...)
• 가-힣: 완성형 한글 (예: 가, 각, 간 ...)
• ᆞ, ᆢ, ㆍ: 천지인 키보드에 쓰이는 글자
• ?: 선택적으로 허용하고 싶은 특수문자 (예: 설문 형태에서 이름 뒤에 붙는 ? 포함 가능)

[^...] 는 괄호 안에 없는 문자를 의미합니다. 따라서 위 정규식은 한글 외의 모든 문자를 제거합니다.

---

✨ 활용 예시

<input type="text" class="onlyhan" placeholder="한국의 이름만 입력해주세요" />

위와 같이 .onlyhan 클래스를 사용하면, 해당 input 박스에 사용자가 알파벳, 숫자, 특수문자 등을 입력해도 모두 제거되고 한글만 남습니다.

---

✨ 활용 예시

$(document).on('keyup focusout', '.onlyhaneng', function(){
    $(this).val($(this).val().replace(/[^a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣|ᆞ|ᆢ|ㆍ|\?|]/gi,""));
});

위와 같이 .onlyhaneng 클래스를 사용한다면 영문과 한글만 사용하게도 가능합니다.

 

---

✨ 주의사항 및 개선 팁

1. 모바일 키보드와의 호환성: 모바일 환경에서는 조합 중 문자를 삭제하는 이슈가 발생할 수 있으므로, input 이벤트와 compositionend 이벤트 조합으로 보완 가능
2. 천지인 사용 여부 확인: ᆞ, ᆢ, ㆍ 등의 천지인 키보드 문자는 대부분의 입력 상황에서는 불필요하므로 제거할 수 있음
3. 필요한 특수문자 추가 허용: 필요 시 ? 외에도 -, _ 등을 정규식에 추가 가능

---

✨ 결론

한글만 입력되도록 제한하는 코드는 사용자의 실수를 줄이고 데이터 정제를 보다 쉽게 도와주는 유용한 방법입니다. 상황에 따라 정규식 범위를 조절하면 더욱 다양한 입력 정책에 대응할 수 있습니다.