JS에서 각종 문자 입력 제어에 대응해 보았다

배경.

우리 회사의 서비스는 세밀한 입력 제어를 해야 한다.
특히 은행 계좌의 명의자는 반각 가명을 입력할 때 소문자(a등)는 대문자(아시아 등), 카페(장음)는 -(하이픈)로 바꿔야 한다.
그 점을 포함해서 나는 각양각색의 처리를 해 보았다.

작업 예

히라가나로만 변환

비평가명을 입력해도 입력할 수 없습니다.조금 이해하기 어렵지만 마지막'엔지니어'는 영화 가명으로 전환해 확정한 뒤 평가명으로 전환했다.

반각 가명 대문자만 변환 (+ 하이픈)

다음 그림과 같이 축구공을 입력하면 일반 공으로 변환됩니다.

https://github.com/koda-h/input-validate-js
docker-compose로 이곳을 이동하면 다음과 같은 입력 제한 동작을 보여줄 수 있습니다.

히라가나 이름으로만 변환(공백 포함)

절반만 슬라이스(공백 포함)

계좌 이체만 허용되는 반각 가나(공간 포함)

전각편 가명으로만 변환(스페이스 바 포함)

공백 포함 전체 각도로만 변환

전체 각도로만 변환

반각 가명 대문자만 변환(빈칸 포함)

반각 가명 대문자만 변환(장음이 하이픈 음으로 변환)(빈칸 포함)

반각 가명 대문자 영수로만 변환(장음이 연자 음으로 변환)(빈칸 포함)

를 반각 영수로 변환(빈칸 제외)

를 반각영 숫자 기호로 변환(빈칸 제외)

공백 포함 반각 영숫자로 변환

를 반각 숫자로 변환(빈칸 제외)

공백 포함 반각 숫자로 변환

를 반각 숫자(0 이상의 정수)로 변환(공간 제외)

반각 숫자(0 이상의 정수)로 전환하면 마침표(빈칸 제외)

를 전화번호 문자열로 변환(반각 숫자+하이픈 빼기)

전화 번호에 하이픈

추가

이용 방법

필요한 물건

moji.js

https://raw.githubusercontent.com/koda-h/input-validate-js/master/public/input-validate.js

코드 설명 예

<input name="hiragana" type="text" value="">

<script>
    var isComposing = false;
    // ひらがなのみに変換(スペース含む)
    $('[name="hiragana"]').on('keyup blur compositionstart compositionend', function (event) {
        // 3番目の引数で最大入力文字数を制御
        convert_hiragana(this, event.type, 30);
    });
</script>

https://github.com/koda-h/input-validate-js/blob/master/public/index.html
여기에도 기술례가 있으니 참조하시오.

해설

compositionstart, compositionend는 IME의 텍스트 편집 모니터링에 사용되는 이벤트입니다.
글로벌에서 정의var isComposing;compositionstart(IME 가져오기 중)의 경우 isComposing = true;입니다.
이 상태keyup에서 사건blur이 검출되면 전환(※ 1)됩니다.
그리고 compositionend(IME 입력 후 Enter 누르기)의 정시isComposing = false;에서 이 상태에서 전환하지 않는다(※ 1).
(※ 1)여기.의 부분

참고 자료

https://qiita.com/darai0512/items/fac4f166c23bf2075deb