메모장에서는 되지만 POS에서는 안 됨

문제

일반 텍스트 편집기에 스캔하면 매번 올바른 값이 나오지만, POS, 웹 앱, 내부 도구에 스캔하면 아무것도 없거나, 일부만 입력되거나, 잘못된 동작이 나옵니다.

가능한 원인

• 스캔 시점에 대상 필드에 키보드 포커스가 없거나, 포커스가 입력이 아닌 요소에 있음
• keydown 핸들러가 문자 입력을 막는 방식으로 preventDefault()를 호출함
• 앱이 paste나 input 이벤트에 의존하는데, 스캐너 키 입력은 기대한 방식으로 그 이벤트를 일으키지 않음
• 입력 마스크나 검증 정규식이 스캔 데이터 안의 유효한 문자를 거부함
• ENTER/TAB 접미사가 의도하지 않은 동작을 일으킴(폼을 너무 일찍 제출, 모달을 닫음, 다른 화면으로 이동)
• 스캔이 디바운스되거나 스로틀된 입력 핸들러가 모든 키 입력을 등록할 수 있는 속도보다 빠름

진단 절차

1. 같은 브라우저에서 키보드 이벤트 테스터를 열고 바코드를 스캔합니다. 여기서 모든 문자가 올바르게 기록되면 브라우저와 OS는 이벤트를 정상적으로 받고 있으므로, 버그는 앱의 이벤트 처리에 있습니다.
2. 실제 워크플로에서 스캔 직전에 입력 필드에 포커스가 있는지 확인합니다. 테스트를 위해 직접 클릭했을 때만 되는 경우가 아닙니다.
3. 브라우저 DevTools 콘솔을 열고 스캔 중에 던져진 JavaScript 오류를 확인합니다. 핸들러 중간에 오류가 나면 이후 키 입력 처리가 조용히 멈춥니다.
4. 입력 마스크, 검증, 디바운스 로직을 잠시 제거하고 다시 시험해 어느 층이 입력을 버리는지 분리합니다.
5. 앱이 keydown/keyup 대신 keypress(사용 중단되었고 일부 키에서 불안정함)를 듣는지 확인합니다.

수정 방법

• 워크플로가 스캔을 기대할 때마다 대상 필드를 프로그래밍 방식으로 포커스합니다(예를 들어 행을 추가한 직후)
• keypress 리스너를 keydown/keyup으로 바꿉니다. keypress는 사용 중단되었고 일부 키를 일관되지 않게 처리합니다
• 키보드 핸들러의 preventDefault() 호출을 점검해 정당한 문자 키를 막지 않는지 확인합니다
• 입력 마스크와 검증을 느슨하게 해 바코드 심볼로지가 만들 수 있는 전체 문자 범위를 받은 뒤, 개별 키 입력이 아니라 조립된 값을 검증합니다
• 스캐너 접미사를 폼이 기대하는 것에 맞춥니다(ENTER와 TAB 접미사 참고)

관련 도구

키보드 이벤트 테스터 · 바코드 입력 테스터