· FRONT-END/└ JS

[ JavaScript ] 1000자까지만 입력되도록 막아보기

감자도리22 2024. 5. 9. 20:29

환경 : Visual Studio Code

 

 

 

[ 주요 코드 ]

    <script type="text/javascript">
        function checkLength(){
            var inputTarget = document.querySelector(".temp");
            var text = inputTarget.value;
            var lengthTarget = document.querySelector(".result1");
            
            if(text.length > 1000) {
                lengthTarget.style.color = "red";
                alert('1000자가 초과되었습니다.');

                inputTarget.value = text.substring(0, 999);
                return '';
            } else {
                lengthTarget.style.color = "";//색상제거
            }

            lengthTarget.textContent = text.length + " / 1000";

        }
    </script>

     (+) 텍스트의 길이가 1000자를 넘은 경우 경고창을 띠워 준다.

     (+) substring()을 활용하여 사용자가 더 입력을 하더라도 1000자만 보여지게 설정해준다. 

              └ 사용자의 입력을 막기 어렵기 때문에, 사용자는 입력하도록 냅두고 프로그램에서 알아서 잘라 보여준다

     (+)  return '';을 수행하여 강제 종료 효과를 낸다

     (+)  lengthTarget.style.color = ""; 를 하면 색상이 제거된다. 

              └ 따로 색상을 정해주지 않고 원래의 색상으로 돌아가게끔 해줘야 한다. (이후 기본 색상이 바뀔 수 있기 때문)

 

[ 전체 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript 예제</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
     
    <!-- 내가 구현할 스타일 -->
    <link rel="stylesheet" type="text/css" href="../css/commons.css">
    <link rel="stylesheet" type="text/css" href="../css/test.css">
    
    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>

    </style>

    <!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
    <script type="text/javascript">
        function checkLength(){
            var inputTarget = document.querySelector(".temp");
            var text = inputTarget.value;
            var lengthTarget = document.querySelector(".result1");
            
            if(text.length > 1000) {
                lengthTarget.style.color = "red";
                alert('1000자가 초과되었습니다.');

                inputTarget.value = text.substring(0, 999);
                return '';
            } else {
                lengthTarget.style.color = "";//색상제거
            }

            lengthTarget.textContent = text.length + " / 1000";

        }
    </script>
</head>
<body>


    <div class="container w-500">
        <div class="cell center">
            <h3>(Q) 입사 후 20년 뒤에 본인의 모습을 예상해보세요</h3>
        </div>
        <div class="cell">
            <input type="text" class="temp tool w-100" oninput="checkLength();" style="height: 250px;">
        </div>
        <div class="cell right result1">0 / 1000</div>
    </div>

   

</body>
</html>

 

 

    - 실행결과 (최대 작성 글자를 10자로 지정하여 테스트)

실행결과

 

 

 

 

개인 공부 기록용입니다:)

 

728x90