자바스크립트가 포커스를 처리하는 방법-JS 튜토리얼-php.cn

자바스크립트가 포커스를 처리하는 방법

藏色散人

풀어 주다： 2021-10-18 14:11:54

원래의

2291명이 탐색했습니다.

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>

로그인 후 복사

자바스크립트가 포커스를 처리하는 방법