JavaScript가 포커스를 얻고 잃는 방법
- 醉折花枝作酒筹앞으로
- 2021-04-29 09:17:374354검색
이 글에서는 JavaScript에서 집중력을 얻는 방법과 집중력을 잃는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
포커스 처리
포커스 처리에는 주로 포커스(초점을 얻음) 및 블러(초점을 잃음) 이벤트 유형이 포함됩니다. 소위 포커스는 키보드 이벤트에 응답할 수 있도록 양식 필드를 활성화하는 것입니다.
포커스 가져오기: focus
이 이벤트는 클릭하거나 Tab 키를 사용하여 양식 요소나 하이퍼링크 개체로 전환할 때 트리거됩니다. 포커스 이벤트는 페이지 내에서 마우스의 현재 위치를 결정하는 방법입니다. 기본적으로 전체 문서에 초점이 맞춰져 있지만 탭 키를 클릭하거나 사용하여 초점 위치를 변경할 수 있습니다. '
예: 페이지 로드가 완료된 후 양식의 첫 번째 텍스트 상자 필드로 포커스를 이동하여 사용자 입력을 받을 준비를 합니다.
<form id="myform" method="post" action="#">
姓名<input type="text" name="name"/><br>
密码<input type="password" name="pass" /></form><script>
var form = document.getElementById("myform");
var field = form.elements("name");
window.onload = function(){
field.focus();
}</scriipt>Lost focus: Blur
blur 이벤트 유형은 요소가 포커스를 잃을 때의 응답을 나타냅니다. , 포커스 이벤트 유형에 해당하며 주로 양식 요소 및 하이퍼링크 개체에 작용합니다
예: 포커스 및 흐림 이벤트 처리 기능은 모든 입력 양식 요소에 바인딩되어 있으며 해당 요소는 포커스를 얻고 오목형
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" />
<input type="text" />
<script>
var o = document.getElementsByTagName("input");
for(var i = 0; i < o.length; i++){
o[i].onfocus = function(){
this.style.borderStyle = "outset";
}
o[i].blur = function(){
this.style.borderStyle = "inset";
}
}
</script>
</body></html>
참고: 필드가 숨겨져 있거나() 필드가 CSS의 표시 및 가시성을 사용하여 표시되는 경우 포커스를 얻도록 설정하면 예외.
【추천 학습: javascript 고급 튜토리얼】
위 내용은 JavaScript가 포커스를 얻고 잃는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제