반응형
JSP에서 특정 이슈가 발생했을 때 Javascript를 이용하여
해당 Element로 이동하는 것. 포커스 이벤트와 제어를 알아보겠습니다.
엘리먼트.focus()
Javascript로 Html 엘리먼트를 지정후 뒤에 focus()를 입력하면
해당 엘리먼트에 포커스 지정이 완료됩니다.
포커스 이동 예제 소스
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title></title>
<script type="text/javascript">
function chk_meal(){
var food = document.getElementById("food").value;
var drink = document.getElementById("drink").value;
if(food == '치킨'){
alert("치킨을 입력할 수 없습니다.");
document.getElementById("food").focus();
return;
}
}
</script>
</head>
<body>
음식<input type="text" id="food" value=""><br>
음료<input type="text" id="drink" value=""><br><br>
<button onclick="chk_meal()">식단 체크</button>
</body>
</html>
위와 같이 값을 입력하고 식단 버튼을 클릭하면
음식 input box에 유효하지 않은 값이 있을 경우
해당 element에 포커스를 이동하게 됩니다.
반응형
'Dev > JavaScript' 카테고리의 다른 글
| [Javascript] 회원가입 유효성 검사 (이메일 정규식 체크 포함) (0) | 2022.12.07 |
|---|---|
| [Javascript] 공백 제거 로직(replace, trim) (0) | 2022.12.07 |
| [Javascript] 새창으로 팝업 열기 예제 및 소스 (0) | 2022.12.05 |
| [Javascript] 특정 문자 단어 바꾸기 replace, replaceAll, 정규식 (0) | 2022.12.02 |
| [Javascript] 파일 업로드 용량 체크하기 로직 (0) | 2022.12.01 |