[Jquery] 제이쿼리 텍스트(문자열) 변경 실시간 감지방법 설명(간단)

안녕하세요.

현재 onchage()를 이용해서는 text나 textarea의 경우에는 값을 적고 있는 시점에는 값의 변경을 감지하지 못합니다. (foucs out일 경우는 체크) 그리하여 오늘은 input 타입 text에서 문자열이 변경됐을때 실시간으로 현재 변경된 값을 바로 읽어 드릴수 있는 방법에 대해서 설명 드리겠습니다.

- 소스코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 
<html>
    <head>
        <script>
             var newValue;
             // 모든 텍스트의 변경에 반응합니다.
             $("#testOnchange").on("propertychange change keyup paste input", function() {
                
                // 현재 변경된 데이터 셋팅
                newValue = $(this).val();
                
                // 현재 실시간 데이터 표츌
                alert("텍스트 :: " + newValue);
             });
             
        </script>
    </head>
    <body>
    
        <input id="testOnchange" type="text" value="안녕하세요.">
        
    </body>
</html>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

- 소스설명

위와 같은 방법으로 구현 하였을때는 text의 모든 문자열 변화를 캐치 할 수 있습니다. 개발자도구(F12)에서 값을 변경해도 실시간으로 바로 체크가 가능하므로 보안 이슈를 많이 줄일 수 있다는 장점도 있습니다.

- 글을 마치며

오늘은 상당히 간단하지만 자주 사용할수 있는 실시간 텍스트 감지에 대해서 설명드렸습니다. 모든분들에게 많은 도움이 되었으면 좋겠습니다.

감사합니다.

'JavaScript' 카테고리의 다른 글

[Jquery] 제이쿼리 change 이벤트 사용방법 & 예제, change 이벤트 소스코드로 정리와 설명 (0)	2020.02.27
[Javascript] 자바스크립트 onchange() 사용법 & 예제 (데이터 가져오기 포함) (0)	2020.02.26
[Jquery] 제이쿼리 텍스트 변경 .text() .html() (예제포함) (0)	2020.02.19
[Jquery] 제이쿼리 Ajax 설명 사용법 및 예제(간단) (1)	2020.02.14
[Javascript/Jquery] 자바스크립트 onclick 이벤트 리스너 설명 및 소스(초간단) (0)	2020.02.13