Dev/JavaScript

[Javascript] 포커스 이동 방법 및 제어(focus move)

늙은개발자 2022. 12. 5. 14:10
반응형

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에 포커스를 이동하게 됩니다.

 

반응형