한글 IME 상태의 S/N 바코드 입력 보정 스크립트

바코드 리더기로 제품 S/N을 여러 건 입력할 때는 한/영 입력 상태가 문제를 만든다. 영문과 숫자로 된 S/N도 Windows IME가 한글 상태이면 한글 자모로 들어갈 수 있다.

이 스크립트는 지정한 입력칸의 값을 영문 대문자와 숫자 규칙으로 보정한다. 화면 표시뿐 아니라 폼에 전달되는 input.value도 같은 규칙으로 바꾼다.

입력 보정이 필요한 상황

바코드 리더기는 대체로 키보드 입력을 빠르게 보내는 방식으로 동작한다. 영문 ACE123을 기대한 입력칸에 한글 자판 상태의 키 입력이 들어가면 ㅁㅊㄷ123처럼 보일 수 있다.

입력 상태를 확인하고 다시 스캔하는 대신, 값이 들어오는 시점에 보정하도록 만들었다. 대상은 제품 코드나 S/N처럼 영문·숫자 규칙이 분명한 입력칸이다.

보정 순서

한글 자모로 들어온 부분을 영문 키 조합으로 되돌린다.
영문 알파벳은 대문자로 통일하고 숫자는 유지한다.
공백과 특수문자는 지정한 허용 규칙에 따라 제거한다.
보정한 값을 input.value에 다시 넣어 제출값에도 적용한다.

입력칸에 보이는 문자열만 바꾸는 방식이 아니다. 다음 화면이나 서버로 전달되는 값도 같은 규칙으로 정리한다.

파일 구성

저장소에는 보정 코드와 동작을 확인할 데모 페이지만 두었다. 핵심 파일은 sn-ime-auto-convert.js다.

ko-sn-ime-auto-convert/
├─ sn-ime-auto-convert.js   # 입력 보정 핵심 코드
└─ demo.html                # 보정 전후 값을 직접 확인할 수 있는 샘플

배포 파일과 변경 이력은 GitHub 저장소에서 확인할 수 있다.

적용

스크립트를 불러온 뒤 바코드 입력칸의 selector를 지정한다.

<script src="./sn-ime-auto-convert.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    applySnImeAutoConvert('#Sno_001, #SnoChange_001');
  });
</script>

여러 입력칸에 적용할 때는 selector 범위를 넓힌다.

<script>
  document.addEventListener("DOMContentLoaded", function () {
    applySnImeAutoConvert('input[id^="Sno_"], input[id^="SnoChange_"]');
  });
</script>

동적으로 입력칸을 만드는 페이지에서는 해당 요소가 DOM에 추가된 뒤 applySnImeAutoConvert()를 다시 호출한다.

입력 예시

입력값: ㅁㅊㄷ123
저장값: ACE123

입력값: asdf123
저장값: ASDF123

입력값: A-C E 123
저장값: ACE123

적용 전 확인

이 보정기는 영문과 숫자가 기본인 입력칸을 위한 도구다. 일반 문장이나 한글 텍스트 입력칸에 적용하면 정상 한글 입력까지 바꿀 수 있다.

하이픈, 언더스코어, 공백이 S/N 규격에 필요하다면 허용 문자 규칙을 먼저 조정한다. 기본값에서는 필요한 문자가 제거될 수 있다.

입력 보정이 필요한 상황

보정 순서

파일 구성

적용

입력 예시

적용 전 확인

댓글