input태그 안에 바코드를 기입해야 하는데, 현재 keybord의 한/영키 상태에 따라 값이 다르게 들어가는 오류가 발생했다. 영문키 상태에서는 정상적으로 들어가나 한글키 상태에서는 바코드 스캔 시 '2023CE23' 같은 데이터의 경우 '2023ㅊㄸ23'으로 한글이 포함된 문자로 들어가는 상태. 이를 해결해 보고자 여러 가지 방법을 시도해 보다 새로운 한영키 변환법을 발견했다.

해당 방법은 한글 입력 방지가 아닌, 입력 시 한타 -> 영타로 한영키를 자동으로 변환해 주는 방법이다.

해결방안

1. HTML의 INPUT태그 속성

type = 'password'

와 같이 설정할 경우 해당 텍스트 상자에 focus가 간 순간, 한타 -> 영타로 전환된다.
문제는 아래와 같이 입력한 값이 **** 로 보인다는 점.

이를 해결하기 위해 js에서 속성을 변경해 주는 작업을 추가로 진행했다.

2. js에서 text로 type변경

input태그의 id로 keydown이벤트를 주어, prop를 변경한다.

$(document).on('keydown', '#mbarcode', function(e){
      $(this).prop("type", "text");
 }

한타 상태에서 해당 텍스트 상자에 글자를 입력하면, js에서 적용한 keydown이벤트가 발생되어 input 태그의 property를 text로 변경해준다. 오른쪽과 같이 입력한 글자가 별 표시(*)가 아닌 문자 그대로 정상 출력되는 것을 볼 수 있다.

문제점

처음 focus를 주었을 때는 영타로 자동 변환되나 그 이후에 사용자가 직접 한/영키를 눌러 한타로 전환하면 한글 입력이 가능하다는 문제점이 존재한다. 이 경우에는 이벤트 종료 시점에 property를 다시 password로 변경해 주면 되며, 이벤트 종료 시점이 명확하지 않은 경우라면 정규식을 사용해 한글 입력 시 사용자에게 한/영키 전환 경고 메세지를 출력하거나, 입력한 문자열을 영문으로 변경해 주는 방법을 고려해 보면 좋을 것 같다.

시도했던 방법(실패)

1. input 태그의 IME-Mode 설정

<input type="text" style="ime-mode:disabled;">

ime-mode는 IME(Input Method Editor)의 상태를 변환하는 속성으로
active인 경우 한글 기본입력
inactive인 경우 영문 기본입력
disable인 경우 영문만 입력 가능(한글 허용x)
이렇게 세 가지 속성값이 존재한다.

한글 입력을 방지하기 위해 disabled로 설정해 보니 여전히 한글 입력이 가능한 상태였다.
알아보니 해당 방법은 Explorer 브라우저에서만 가능한 방법이었고, 브라우저 별 ime-mode를 설정해 보았으나 작동되지 않았다.

<style>
    #mbarcode {
    -webkit-ime-mode:disabled;
    -moz-ime-mode:disabled;
    -ms-ime-mode:disabled;
    ime-mode:disabled;
    } 
</style>

결론 : ime-mode는 더 이상 지원하지 않는 기능인듯하다.

2. 한글입력시 영문 변환

1) inko 라이브러리 이용

• html import

  <script src="https://cdn.jsdelivr.net/npm/inko@1.1.0/inko.min.js"></script>

• javascript

 $('#mbarcode').val(inko.ko2en($(this).val()));

해당 라이브러리는 입력한 한글을 영문으로 자동 변환해 주는 기능을 제공하는데, 사용해 보니 입력한 글자 수보다 더 많은 글자가 들어가거나 대소문자를 제대로 인식하지 못하는 오류가 발생하여 사용하지 못했다.

2) JS 함수 사용

function convertKoreanToEnglish(koreanText) {
  const koreanPattern = /[ㄱ-ㅎㅏ-ㅣ가-힣]/g;

  return koreanText.replace(koreanPattern, match => {
    const code = match.charCodeAt(0) - 44032;
    const cho = Math.floor(code / 588);
    const jung = Math.floor((code - cho * 588) / 28);
    const jong = code % 28;

    const choToEnglish = ['g', 'gg', 'n', 'd', 'dd', 'r', 'm', 'b', 'bb', 's', 'ss', '', 'j', 'jj', 'ch', 'k', 't', 'p', 'h'];
    const jungToEnglish = ['a', 'ae', 'ya', 'yae', 'eo', 'e', 'yeo', 'ye', 'o', 'wa', 'wae', 'oe', 'yo', 'u', 'wo', 'we', 'wi', 'yu', 'eu', 'ui', 'i'];
    const jongToEnglish = ['', 'g', 'gg', 'gs', 'n', 'nj', 'nh', 'd', 'l', 'lg', 'lm', 'lb', 'ls', 'lt', 'lp', 'lh', 'm', 'b', 'bs', 's', 'ss', 'ng', 'j', 'c', 'k', 't', 'p', 'h'];

    const choResult = choToEnglish[cho] || '';
    const jungResult = jungToEnglish[jung] || '';
    const jongResult = jongToEnglish[jong] || '';

    return choResult + jungResult + jongResult;
  });
}

이 코드는 GPT가 만들어준 js 영문 변환 함수인데, 한글-영문이 제대로 변환되지 않았다. 다른 사람들의 코드도 참고해 봤지만, 영어 대/소문자를 구분할 수 없는 데다 코드가 너무 길어진다는 문제가 있어 사용하지 않았다. (오류 - 대문자 D를 입력받아야 하는데 한글 'ㅇ'입력 시 소문자'd'로 입력됨)

결론

위의 해결 방식을 사용하기 싫다면, 한글 자판 입력 시 사용자에게 한/영키 전환 경고 메세지를 출력해 주거나 대/소문자 구분이 필요 없는 경우라면 커스텀 함수를 사용하면 될 것 같다.

한글 구분 정규식

  let korCheck = /[ㄱ-ㅎㅏ-ㅣ가-힣]/;
      if (korCheck.test($(this).val())) {
        alert('한/영키 전환이 필요합니다.');
        $('#mbarcode').val('');
      }