Javascript

글자수 입력제한

오시리엔 2023. 10. 5. 18:32
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글자수 입력제한</title>

    <!-- css 파일을 불러오는 코드 -->

    <!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

    <!-- 구글 웹 폰트 사용을 위한 CDN -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- 내가 만든 CSS 파일-->
    <link rel="stylesheet" type="text/css" href="./css/reset.css">
    <link rel="stylesheet" type="text/css" href="./css/commons.css">
    <link rel="stylesheet" type="text/css" href="./css/test.css">
    <style>

    </style>

    <!-- javascript 작성 공간 -->
    <script>
        window.addEventListener("load", function(){
            var textareaList = document.querySelectorAll(".form-input");

            for(var i=0; i < textareaList.length; i++) {
                textareaList[i].addEventListener("input", function(){
                    //this == 입력이 발생한 textarea

                    var count = this.value.length;
                    this.nextElementSibling.textContent = count;
                    this.nextElementSibling.classList.remove("red");
                    if(count > 1000) {
                        this.nextElementSibling.classList.add("red");
                    }
                });
            }
        });
    </script>
</head>
<body>
    <div class="container w-600">
        <div class="row">
            <h1>자기소개서</h1>
        </div>
        <div class="row">
            <h2>(Q) 본인 성격의 장단점을 기술하시오.</h2>
        </div>
        <div class="row right">
            <textarea class="form-input w-100" rows="10"></textarea>
            <span class="form-input-length">0</span> / 1000
        </div>
        <div class="row">
            <h2>(Q) 입사 후 20년 뒤의 나의 모습은?</h2>
        </div>
        <div class="row right">
            <textarea class="form-input w-100" rows="10"></textarea>
            <span class="form-input-length">0</span> / 1000
        </div>
        <div class="row">
            <button type="submit" class="btn btn-positive w-100">제출하기</button>
        </div>
    </div>
</body>
</html>

'Javascript' 카테고리의 다른 글

jQuery 제이쿼리  (0) 2023.10.11
기본 이벤트 제어  (0) 2023.10.10
전화기 화면  (1) 2023.10.04
글자크기 조절 문제  (2) 2023.09.30
색상 변경 예제  (0) 2023.09.27