JSP - JavaScript 텍스트 글씨가 출력(버튼과 포커스)됨 (2022-09-16)
2022. 9. 18. 21:31ㆍ3층 1구역 - 개발의 장/JSP
1. 서론
이번엔 텍스트의 입력값을 넣고 버튼을 클릭하면 텍스트가 출력되는 것을 확인해 보자.
2. 본론
이 예제는 버튼을 눌렀을 때 복사가 되는 예제이다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex14</title>
<script type="text/javascript">
function display(){
nameObj = document.getElementById('name')
msgObj = document.getElementById('msg')
msgObj.innerHTML = nameObj.value + "<br>"
}
</script>
</head>
<body>
name : <input type = "text" id = "name"> <br>
<span id = "msg"></span>
<input type = "button" value = "버튼" onclick="display()">
</body>
</html>
다음 예제는 텍스트를 적고 텍스트가 포커스( | << 이게 반짝 거리는거 보통 글 쓸 때 나오는 얘)를 잃었을 경우
출력이 되는 예제이다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex15</title>
<script type="text/javascript">
function display(){
nameObj = document.getElementById('name')
msgObj = document.getElementById('msg')
msgObj.innerHTML = nameObj.value + "<br>" //인식은 하나밖에 하지 못함.
}
</script>
</head>
<body>
name : <input type = "text" id = "name" onblur="display()"> <br>
<span id = "msg"></span>
</body>
</html>
3. 결론
onblur 예제를 하면서 네이버에 회원가입 페이지에서 텍스트칸에 아이디나 비밀번호를 입력했을 때 혹은 입력하지 않았을 때 나오는 텍스트들이 어떻게 나오는건지 이해가 되기 시작했다.
진짜 웹사이트 만드는 사람들 보면 대단하다 정말로...
'3층 1구역 - 개발의 장 > JSP' 카테고리의 다른 글
| JSP - JavaScript mouseover, mouseout (2022-09-16) (0) | 2022.09.18 |
|---|---|
| JSP - JavaScript 클릭 이벤트(이미지 변화, 텍스트 옮기기, 객체 스타일 변화) (2022-09-16) (0) | 2022.09.18 |
| JSP - JavaScript 아ㅋㅋ 텍스트가 복사된다고.ㅋㅋㅋ (2022-09-16) (0) | 2022.09.18 |
| JSP - JavaScript function 사용 (2022-09-16) (0) | 2022.09.18 |
| JSP - JavaScript의 조건문의 사용 (2022-09-16) (0) | 2022.09.18 |