자바스크립트가 포커스를 처리하는 방법
- 藏色散人원래의
- 2021-10-18 14:11:542257검색
JavaScript의 포커스 처리 방법: 1. "field.focus();" 메서드를 통해 포커스 획득 2. "o[i].blur = function(){...}"을 통해 포커스 손실 처리 방법.
이 기사의 운영 환경: windows7 시스템, javascript 버전 1.8.5, DELL G3 컴퓨터
Javascript는 포커스를 어떻게 처리합니까?
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>포커스 손실: 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 기본 튜토리얼"
위 내용은 자바스크립트가 포커스를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!