자바스크립트 글자수 제한하기

자바스크립트로 <input>이나 <textarea> 등에서 사용자가 입력하는 문자열의 길이를 제한하는 방법에 대해 알아봅니다.

예제

아래의 코드는 사용자가 입력하는 글자수를 제한하는 간단한 예제입니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>자바스크립트 글자수 제한하기</title>
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                const maxLength = 10;
                const inputField = document.querySelector("#textInput");
                const textareaField = document.querySelector("#textAreaInput");

                const enforceLength = (event) => {
                    const value = event.target.value;
                    if (value.length > maxLength) {
                        event.target.value = value.slice(0, maxLength);
                    }
                };

                inputField.addEventListener("input", enforceLength);
                textareaField.addEventListener("input", enforceLength);
            });
        </script>
    </head>
    <body>
        <!-- 최대 10자까지 입력 가능한 텍스트 입력 필드 -->
        <input type="text" id="textInput" placeholder="최대 10자 입력 가능">

        <!-- 최대 10자까지 입력 가능한 텍스트 영역 -->
        <textarea id="textAreaInput" placeholder="최대 10자 입력 가능"></textarea>      
    </body>
</html>
실제 적용된 모습

이 스크립트는 사용자가 입력할 때마다 입력된 길이를 확인하고, 최대 길이를 초과할 경우 추가 입력을 방지합니다.

예제 코드와 관련된 주제

고려할 만한 사항

자바스크립트 없이 HTML 속성만을 사용하여 동일한 기능을 구현할 수 있습니다

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>자바스크립트 없이 HTML 속성만을 사용하여 동일한 기능을 구현</title>
    </head>
    <body>
        <!-- 최대 10자까지 입력 가능한 텍스트 입력 필드 -->
        <input type="text" id="textInput" placeholder="최대 10자 입력 가능">

        <!-- 최대 10자까지 입력 가능한 텍스트 영역 -->
        <textarea id="textAreaInput" placeholder="최대 10자 입력 가능"></textarea>      
    </body>
</html>
실제 적용된 모습

이 경우에는 자바스크립트를 사용하지 않고, HTML의 maxlength 속성을 사용하는 것이 훨씬 더 효율적이고 간편한 방법입니다. 자바스크립트를 활용해야 하는 특별한 경우가 아니라면, HTML 속성으로 해결하는 것이 바람직합니다.

자바스크립트 말줄임 표시(…)

자바스크립트로 출력되는 문자열의 제한하는 글자수가 넘어가면 말줄임 표시(…)를 하는 방법에 대해 알아봅니다.

예제

아래의 코드는 말줄임 표시를 함수로 만든 간단한 예제입니다.

JavaScript 
/* 말줄임 표시 함수 */
const ellipsisTextOverflow = (str, length) => {
    if (typeof str !== "string") {
        console.error("문자열을 입력하세요!");
        return;
    }

    // length 인자가 유효한 정수인지 확인, 그렇지 않으면 기본값 20을 사용
    const lengthIndex = (Number.isInteger(length) && length > 0) ? length : 20;

    if (str.length > lengthIndex) {
        // 문자열이 지정된 길이를 초과하면 말줄임 표시 추가
        return str.substring(0, lengthIndex) + "...";
    } else {
        // 문자열이 지정된 길이를 초과하지 않으면 그대로 반환
        return str;
    }
};

console.log(ellipsisTextOverflow("이 문자열은 너무 깁니다.", 10)); // 출력: 이 문자열은...
console.log(ellipsisTextOverflow("짧은 문자열", 20)); // 출력: 짧은 문자열
console.log(ellipsisTextOverflow("유효하지 않은 길이", -5)); // 출력: 유효하지 않은 길이...
console.log(ellipsisTextOverflow(12345, 10)); // 출력: "문자열을 입력하세요!" (콘솔 오류 메시지)

이 코드 예제는 자바스크립트의 기본적인 개념(조건문, 함수, 문자열 처리 등)을 익히는 데 좋은 참고 자료가 될 것입니다. 다양한 상황에서 이 함수를 테스트해보면서 자바스크립트의 동작을 이해하는 데 도움이 될 것입니다.

예제 코드와 관련된 주제

고려할 만한 사항

실제로 프런트엔드에서 텍스트가 일정 길이를 초과했을 때 말줄임표(...)를 표시하는 작업은 CSS로 처리하는 것이 더 간단하고 효율적입니다. CSS는 기본적으로 스타일링을 위한 것이기 때문에, 이러한 시각적인 처리에 최적화되어 있습니다. 자바스크립트로 처리할 필요 없이, CSS만으로도 동일한 효과를 쉽게 구현할 수 있습니다. CSS 말줄임 표시(…) – 한 줄, 여러 줄 말줄임 완벽 가이드를 참고하세요!

같이 보기