[JAVA SCRIPT] 천지인을 고려하여 입력 제한 개발하기

 

 

1. 5글자의 입력값을 받아 응모 이벤트 진행하기

예시)

24년도 7월입니다! 여러분의 상반기는 어땠나요?

상반기 잘 마무리하시고, 하반기에도 좋은 일만 가득하길 바라는 마음을 담아 이벤트를 진행하려고 해요!

응원문구 5글자를 작성해주시면, 자동 응모가 됩니다. 

 

2. 천지인 자판 사용자 발생 

안녕하세요, 응원문구 5글자를 입력하려고 하는데 글자가 정상적으로 입력이 안됩니다. 확인 부탁드립니다. 

 

고객의 핸드폰은  안드로이드를 사용했으며, 천지인 자판을 사용중 인 것으로 확인 되었다.

 

3. 문제확인

화면단에서 5글자만 입력 가능하도록 개발했는데, 천지인 키보드를 사용하면 입력값이 5글자가 넘게 되어 정상적으로 입력값을 받지 못하는 케이스가 발생한다.

 

예시 ) 고객이 쓰고 싶은 문구 !  파이팅이여

 

천지인 키보드를 사용하면 마지막 문자에 자음을 쓰고 아래아 문자를 쓰게 되면 (ㆍ) 글자수를 넘게되어

정상적인 글자 수파악이 어렵다.

 

파이팅이ㅇㆍ (아래아로 인하여, 6글자가 되어버린다.)

 

천지인 키보드에서는 자음 입력 후에 모음을 입력하려고 하면 하나의 글자를 완성하는 과정에서 중간에 글자 수가 임시로 늘어나는 현상이 발생함. 

 

4. 이러한 경우에 어떻게 해결하면 좋을까?

 

1)  입력값이 한글 조합임을 감지하도로 하고, 글자가 완성될 때만 글자 수를 체크하는 로직을 만들기 

 

[코드 로직]

document.addEventListener("DOMContentLoaded", () => {
    const textInput = document.getElementById("textInput");
    const error = document.getElementById("error");

    let isComposing = false;


    /* 한글 조합이 시작될 때 isComposing 변수를 true */
    textInput.addEventListener("compositionstart", () => {
        isComposing = true;
    });

     /* 한글 조합이 끝날 때 isComposing 변수를 false로 설정 후 글자 수 제한 로직 넣기 */
    textInput.addEventListener("compositionend", () => {
        isComposing = false;
        validateInput();
    });

    textInput.addEventListener("input", () => {
        if (!isComposing) {
            validateInput();
        }
    });

    function validateInput() {
        if (textInput.value.length > 5) {
            error.style.display = "block";
            textInput.value = textInput.value.slice(0, 5);
        } else {
            error.style.display = "none";
        }
    }
});

 

- compositionstart 이벤트

 : 웹 개발에서 입력기(IME, Input Method Editor)를 사용하여 다국어 텍스트를 입력할 때 발생하는 이벤트

텍스트 조합이 시작될 때 발생하며, 한글을 포함한 복잡한 문자 입력 시스템에서 자주 사용.

 

(관련 공식 문서 : https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event)

 

- compositionstart: 텍스트 조합이 시작될 때 발생
- compositionupdate: 텍스트 조합 중에 발생하며, 조합 중인 현재 텍스트를 업데이트
- compositionend: 텍스트 조합이 완료되었을 때 발생

 

- 한글이 완성되지 않은 상태에서는 글자 수 검사를 하지 않고, 조합이 완료된 후에만 글자 수 검사를 할 때 사용하면 유용하다. 

 

 

5. 그 외

 

- 위의 내용으로 해결 전에 입력값의 패턴을 모두 확인해서, 아래아로 끝나면 글자수에 포함되지 않도록 처리 해보려했었다.

 

- 천지인 아래아인지 확인하는 패턴 정규식 

        // 함수: 입력된 문자가 천지인 아래아 문자인지 확인
        function isBelowSymbol(char) {
            const belowSymbolPattern = /[\\u318D\\u119E\\u11A2\\u2022\\u2025\\u00B7\\uFE55]/;
            return belowSymbolPattern.test(char);
        }

 

- 입력된 값이 천지인 자음인지 확인하는 패턴 정규식 

        // 함수: 입력된 문자가 천지인 자음인지 확인
        function isConsonant(char) {
            const consonantPattern = /[\\u3131-\\u314E\\u313F-\\u3163]/;
            return consonantPattern.test(char);
        }

 

- 정규식에 대한 정리 내용 

 

: 공식 문서에 정리가 잘 되어있으니, 아래 내용을 참고해도 좋겠다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_expressions

 

입력값에 제한을 걸 때 다양한 부분을 고려해서 개발하기 !