웹에서 실시간으로 문자열을 출력해야 할 때가 있다.
동일한 내용을 두 번 쓸 필요가 없게하는 방법인데 어떤 이벤트를 사용할까 고민하다 선택한 방법이다.
방법
1. 입력창에 문자가 입력된다.(키보드를 눌렀다가 뗀다.)
2. 입력창에 있는 문자열을 읽는다.
3. 원하는 위치에 읽은 문자열을 출력한다.
================================ JSP ================================
<!-- 스크립트 부분 / 사용한 CDN (jQuery 3.3.1)-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 입력란에 입력을 하면 입력내용에 내용이 출력
// 1. #data 공간에서 keyup이라는 이벤트가 발생했을 때
$("#data").keyup(function(){
// 2. #out 공간에 #data의 내용이 출력된다.
$("#out").text($("#data").val());
// #out의 위치에 text로 데이터를 받는다.(setter)
// 들어가는 데이터는 #data의 값(.val())이다. (getter)
// 메서드 괄호 안에 아무것도 없으면 getter, 파라미터가 있으면 setter이다.
});
});
</script>
<!-- 바디 부분 -->
<body>
<form>
키보드로 입력한 내용이 아래에 출력(입력값을 가져와서 입력내용에 전달한다.)<br/>
입력 : <input id="data"><br/>
입력 내용:<div id="out">출력되는 곳</div>
</form>
</body>
================================ JSP ================================
먼저 바디부분을 보면 내용이 입력되는 input에 data라는 id를 준다.
그리고 출력되는 부분을 div로 설정하고 out이라는 id를 준다.
자바스크립트를 보면 data에 키보드가 눌리고 올라오면(.keyup()) out부분에 text로 설정된 값이 세팅된다는 것을 알 수 있다.
'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| [Spring] AOP를 적용하여 log찍어보기 (0) | 2018.06.04 |
|---|---|
| [JavaScript] Check Box를 눌렀을 때 체크한 원소들을 출력(jQuery 3.3.1, JSP) (1) | 2018.05.22 |
| [Spring] Criteria.class(페이징처리, 검색) (0) | 2018.05.21 |
| [Spring] list.jsp (페이징처리, 검색) (0) | 2018.05.21 |
| [JavaScript] HTML이 적용된 것을 실시간IO로 확인(jQuery 3.3.1, JSP) (0) | 2018.05.21 |