반응형
텍스트 필드 또는 버튼 포커스를 얻을 때의 시점과 잃을 때의 시점을 확인하는 방법을
알아보자.
▶ 포커스를 얻을 때
focus(handler)
→ handler는 지정한 엘리먼트가 포커스를 얻으면 수행되는 코드를 포함하는 함수
$('선택자').focus(function(e){
// 포커스가 얻어지면 실행 할 코드
});
이 메서드는 지정한 엘리먼트에 포커스 이벤트를 연결하고, 지정한 엘리먼트가 포커스를 얻으면 실행된다.
▶ 포커스를 잃을 때
blur(handler)
→ handler는 지정한 엘리먼트가 포커스를 잃을 때 실행되는 코드를 포함하는 함수
$('선택자').blur(function(e){
// 포커스를 잃을 때 실행 할 코드
});
이 메서드는 지정한 엘리먼트가 포커스를 잃을 때 실행된다.
위 코드로 예제를 작성해서 확인해 보자.
예)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$('.txtInput').focus(function(e){
console.log(e.target.id + '포커스가 되었다.');
});
$('.txtInput').blur(function(e){
console.log(e.target.id + '포커스가 잃었다.');
});
$('.btn').focus(function(e){
console.log(e.target.id + '포커스가 되었다.');
});
$('.btn').blur(function(e){
console.log(e.target.id + '포커스가 잃었다.');
});
});
</script>
<title>JS Bin</title>
</head>
<body>
name: <input class="txtInput" id="i-name" type="text"><br>
Age: <input class="txtInput" id="i-Age" type="text"><br>
<button class="btn" id="click-btn"> ok </button>
</body>
</html>
위 코드가 있다.
html 코드에 input 태그와 버튼 태그를 만들어서 각각 포커스가 되었을 때와 포커스를 잃었을 때를
확인해보자.
반응형
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - 정의한 CSS 클래스 토글 이벤트 (0) | 2022.03.06 |
|---|---|
| jQuery - 버튼에 호버(hover) 효과 이벤트, 적용하기 (0) | 2022.03.06 |
| jQuery - 마우스 이벤트 관련, 왼쪽/오른쪽 클릭 된 곳 알아내기 (0) | 2022.03.05 |
| jQuery - 버튼을 한 번 누른 후 비활성으로 변경하는 방법 (0) | 2022.03.05 |
| jQuery - 자동으로 이벤트 발생 시키는 방법 (0) | 2022.03.05 |