본문 바로가기

개발일지/JavaScript + jquery

[jquery] focus()명령어

 

 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../jquery-3.6.0.min.js"></script>
  <style>
	input{border: 3px solid green;}
	.active{border: 3px solid red;}
  </style>
  <script>
	$(function(){
		$('#input1').focus(function(){$('#input1').addClass('active');});
		$('#input1').blur(function(){$('#input1').removeClass('active');}); //거두어주어라
		});
  </script>
 </head>
 <body>
	<input type="text" id="input1">
 </body>
</html>

결과는 똑같지만 코드가 너무 길어져서 헷깔린다면 변수를 설정해서 간단하게 쓸수도 있다. 결과는 똑같으니 취향에 맞게 써주면 된다.

$(function(){
		$('#input1').focus(function(){$('#input1').addClass('active');});
		$('#input1').blur(function(){$('#input1').removeClass('active');});
		});

위에서 본 기존의 코딩이다.

$(function(){
		var element = $('#input1');
		element.focus(function(){element.addClass('active');});
		element.blur(function(){element.removeClass('active');});
		});

var element = $('#input1');
변수 설정을 해줌으로서 아래에 있는 $('#input1') 이 부분을 element만 써주면 된다.