116. (javascript/자바스크립트) window keyup 이벤트 사용해 실시간 텍스트 text 입력 글자 수 확인 실시

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

---

[소스코드]

​

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

        /*
        [JS 요약 설명]
        1. window.onload : 브라우저 로드 완료 상태를 나타냅니다
        2. value : 폼 양식에 저장된 값을 얻어옵니다
        3. substring(시작, 길이) : 특정 문자열을 부분 출력할 때 사용합니다
        4. keyup : 키보드 누른 후 >> 올라 간 상태를 확인합니다
        */



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

            // [브라우저 윈도우에서 발생한 keyup 이벤트를 감지]
            window.addEventListener('keyup', inputKeyUp, false);
            function inputKeyUp(evt){
                // 이벤트가 발생한 객체 id 확인
                var tagId = evt.target.id;

                // input box 및 textarea 입력된 글자수 길이 확인
                var inputLength = document.getElementById(tagId).value.length;

                // input box 및 textarea 전체 데이터 확인
                var inputData = document.getElementById(tagId).value;

                // 현재 입력된 글자만 확인 실시
                var nowData = inputData.substring(inputLength-1, inputLength);

                console.log("");                
                console.log("[window onload] : [inputKeyUp] : [start]");
                console.log("[ID] : "+ tagId);
                console.log("[LEN] : "+ inputLength);
                console.log("[TOTAL] : "+ inputData);
                console.log("[NOW] : "+ nowData);
                console.log("");
            };
        };
                
    </script>

---

[결과 출력]

​

---

[요약 설명]

​

/*

[JS 요약 설명]

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

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

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

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

*/

---