투케이2K

28. (jquery/제이쿼리) textarea keyup 이벤트 사용해 실시간 텍스트 입력 글자수 확인 실시 본문

Jquery

28. (jquery/제이쿼리) textarea keyup 이벤트 사용해 실시간 텍스트 입력 글자수 확인 실시

투케이2K 2021. 8. 3. 13:01

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : jquery

[스크립트 소스코드]

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 



    <!-- 내부 JS 지정 : 일반 -->
    <script>

        /*
        [JS 요약 설명]
        1. window.onload : 브라우저 로드 완료 상태를 나타냅니다
        2. val : 폼 양식에 저장된 값을 얻어옵니다
        3. substring(시작, 길이) : 특정 문자열을 부분 출력할 때 사용합니다
        4. keyup : 키보드 누른 후 >> 올라 간 상태를 확인합니다
        5. $("#p_txt").text : p 태그 텍스트 내용을 변경합니다
        6. 참고 : 특정 태그 $("#input_textarea") 내에서 다시 태그를 지정시에는 this 를 사용해 지정할 수 있습니다
        */



        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            console.log("");
            console.log("[window ready] : [start]");
            console.log("");

            // 이벤트 함수 호출
            checkTextAreaByte();
        };



        /* [이벤트 수행 부분] */
        function checkTextAreaByte() {
            console.log("");
            console.log("[checkTextAreaByte] : [start]");
            console.log("");

            // jquery 사용해 textarea keyup 이벤트 지정 실시
            $("#input_textarea").on("keyup", function() {
                // textarea 입력된 글자수 길이 확인
                var inputLength = $(this).val().length; 

                // textarea 에 작성된 전체 데이터 확인
                var totalText = $(this).val();

                // textarea 에 현재 입력된 데이터 확인 
                var nowText = totalText.substring(inputLength-1, inputLength);

                // p 태그 값을 변경 실시 (현재 입력된 글자)
                $("#p_txt").text("현재 입력 글자 : " + nowText);

                // 결과 출력 실시
                console.log("");
                console.log("[checkTextAreaByte] : [inputLength] : " + inputLength);
                console.log("[checkTextAreaByte] : [totalText] : " + totalText);
                console.log("[checkTextAreaByte] : [nowText] : " + nowText);
                console.log("");                 
            });            
        }; 
                
    </script>

​

​

[body 소스코드]

<body>

<!-- textarea layout -->
<div id = "textarea_container"
    style="width: 80%; height: 40%; margin: 0 auto; padding: 0; border: 1px solid #000; position: relative; top: 0%; left: 0%;">

        <textarea id = "input_textarea"
            style="width: 100%; height: 100%; margin: 0 auto; padding: 0; 
                border: none; background-color: #eee; position: relative; top: 0%; left: 0%; color: #000; font-size: 200%;"></textarea>
</div>


<!-- p tag layout -->
<div id = "p_container"
    style="width: 80%; height: 10%; margin: 0 auto; padding: 0; border: 1px solid #000; 
        position: relative; top: 0%; left: 0%; display: table;">

    <p id = "p_txt"
        style="display: table-cell; vertical-align: middle; text-align: center; color: #000; font-size: 200%;">DATA</p>        
</div>

</body>

[결과 출력]

​

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. val : 폼 양식에 저장된 값을 얻어옵니다

3. substring(시작, 길이) : 특정 문자열을 부분 출력할 때 사용합니다

4. keyup : 키보드 누른 후 >> 올라 간 상태를 확인합니다

5. $("#p_txt").text : p 태그 텍스트 내용을 변경합니다

6. 참고 : 특정 태그 $("#input_textarea") 내에서 다시 태그를 지정시에는 this 를 사용해 지정할 수 있습니다

*/

 

반응형
저작자표시

'Jquery' 카테고리의 다른 글

30. (jquery/제이쿼리) hasClass 객체에 클래스 포함 확인 , addClass 객체에 클래스 추가 , removeClass 객체에 클래스 삭제 수행  (0) 2021.08.05
29. (jquery/제이쿼리) checkbox 체크박스 체크 상태 확인 - change 실시간 변경 감지 , is checked 체크 값 확인  (0) 2021.08.04
27. (jquery/제이쿼리) 그룹 라디오 radio 버튼 선택 번호 확인 실시 - length , val 폼 양식 설정 값 확인  (0) 2021.07.30
26. (jquery/제이쿼리) css 지정자 사용해 태그, 클래스, 아이디 css 스타일 변경 실시  (0) 2021.07.13
25. (jquery/제이쿼리) css 관련 메소드 종류 모음  (0) 2021.07.12
'Jquery' Related Articles more
Comments