jquery에 포커스 이벤트가 있나요?
- 青灯夜游원래의
- 2022-12-16 11:31:282118검색
jquery에는 포커스 이벤트가 있습니다. 요소가 포커스를 얻으면 jquery에서 포커스 이벤트가 발생합니다. focus() 메서드를 사용하여 포커스 이벤트를 트리거하거나 "$(selector" 구문을 사용하여 포커스 이벤트가 발생할 때 실행할 이벤트 처리 함수를 지정할 수 있습니다. ).focus(함수)". 요소가 포커스를 잃으면 흐림 이벤트가 발생합니다. jQuery는 Blur() 메서드를 사용하여 흐림 이벤트를 트리거하거나 흐림 이벤트가 발생할 때 실행할 이벤트 핸들러를 지정할 수 있습니다.
이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.
초점은 관심 영역, 즉 현재 커서가 활성화되어 있는 위치입니다. 페이지 화면에서 깜박이는 작은 수직선은 웹 페이지에서 컨트롤이 선택되어 작동 가능하다는 것을 나타냅니다. 마우스를 클릭하여 커서를 가져오면 Tab 키를 누르면 설정된 Tabindex에 따라 포커스가 전환됩니다.
예를 들어 텍스트 상자에 포커스가 있으면 키보드에서 입력하는 문자가 텍스트 상자에 직접 입력됩니다. 예를 들어 드롭다운 목록 상자에 포커스가 있으면 키보드의 아래쪽 화살표를 누르면 목록이 나옵니다. 또한 프로그램에는 포커스를 얻었을 때 발생하는 이벤트(gotfocus()), 포커스를 잃었을 때 발생하는 이벤트(lostfocus()) 및 컨트롤에 포커스를 설정하는 메서드(setfocus())가 있습니다. 초점을 잘 활용하면 프로그램이 매우 사용자 친화적인 것처럼 보일 수 있습니다.
jquery get focus 이벤트
요소가 포커스를 받으면 포커스 이벤트가 발생합니다.
마우스 클릭으로 요소를 선택하거나 탭 키로 위치를 지정하면 해당 요소에 초점이 맞춰집니다.
focus() 메서드는 포커스 이벤트를 트리거하거나 포커스 이벤트가 발생할 때 실행할 함수를 지정합니다.
구문
//触发 focus 事件 $(selector).focus() //将函数绑定到 focus 事件 $(selector).focus(function)
기능: 선택 사항. 포커스 이벤트가 발생할 때 실행할 함수를 지정합니다.
예: focus() 메서드 포커스 가져오기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
});
</script>
</head>
<body>
输入你的名字: <input type="text">
</body>
</html>
jquery가 포커스를 잃음 이벤트
흐림 이벤트는 요소가 포커스를 잃을 때 발생합니다.
blur() 메서드는 흐림 이벤트를 트리거하거나 흐림 이벤트가 발생할 때 실행할 함수를 지정합니다.
팁: 이 메서드는 focus() 메서드와 함께 자주 사용됩니다.
Syntax
//为被选元素触发 blur 事件： $(selector).blur() //添加函数到 blur 事件： $(selector).blur(function)
예: Blur() 메서드가 포커스를 잃습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").focus(function() {
$("input").css("background-color", "#FFFFCC");
});
$("input").blur(function() {
$("input").css("background-color", "#D6D6FF");
});
});
</script>
</head>
<body>
用户名: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>
[권장 학습: jQuery 비디오 튜토리얼, 웹 프런트엔드 비디오]
위 내용은 jquery에 포커스 이벤트가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!