이메일 입력 필드를 위한 한글 및 공백 제거 jQuery

이메일 주소는 일반적으로 알파벳, 숫자, 특수기호(@, ., _) 등으로 구성되며, 한글이나 공백이 포함되어서는 안 됩니다. 이를 보완하기 위해 입력 중 실시간으로 한글 및 공백을 제거하는 기능을 구현할 수 있습니다. 본 글에서는 .onlymail 클래스를 이용하여 이메일 입력 필드에서 한글 및 공백을 제거하는 jQuery 코드를 살펴보겠습니다.

---

✨ 코드 원문

$(document).on('keyup focusout', '.onlymail', function(){
    // 한글(유니코드)과 공백 삭제
    $(this).val($(this).val().replace(/[\uAC00-\uD7AF\u3130-\u318F\u1100-\u11FF\s]/gi,"")); 
});

---

✨ 주요 기능 설명

1. 대상 요소 바인딩

• .onlymail 클래스를 가진 모든 input 요소에 대해 keyup 또는 focusout 시 필터링을 수행합니다.
• 동적 요소에도 대응할 수 있도록 $(document).on()을 사용합니다.

2. 정규표현식을 통한 한글 및 공백 제거

.replace(/[\uAC00-\uD7AF\u3130-\u318F\u1100-\u11FF\s]/gi, "")

• \uAC00-\uD7AF: 완성형 한글
• \u3130-\u318F: 호환 자모 영역
• \u1100-\u11FF: 자모 구성 요소
• \s: 공백 문자 (띄어쓰기, 탭 등)
• 이 정규식을 통해 이메일 입력에 불필요하거나 부적절한 문자를 실시간으로 제거합니다.

---

✨ 사용 예시

<input type="text" class="onlymail" placeholder="이메일 주소를 입력하세요" />

• 위 input 필드에 사용자가 한글이나 공백을 입력하려고 하면 자동으로 제거됩니다.

---

✨ 활용 팁

• 이메일 입력 필드 유효성 검사는 해당 필터 외에도 별도 pattern 또는 정규식 체크가 필요합니다.
• input 이벤트를 추가로 활용하면 모바일 환경에서도 보다 안정적인 작동을 기대할 수 있습니다.

---

✨ 결론

이메일 입력 시 발생할 수 있는 한글 및 공백 입력을 방지하는 것은 기본적인 입력 검증 절차 중 하나입니다. jQuery를 이용해 실시간으로 이러한 문자들을 제거함으로써 사용자로 하여금 보다 정확한 이메일 정보를 입력하게 유도할 수 있습니다.