초점 요소
어떤 요소가 집중할 수 있습니까? 기본적으로 양식 요소 만 집중할 수 있습니다. 양식 요소 만 상호 작용할 수 있기 때문입니다
<입력 유형 = "text"value = "223">
비 형식 요소의 초점을 얻는 방법도 있습니다. 먼저 tabIndex 속성을 -1로 설정 한 다음 focus() 메소드를 호출하십시오.
<div id = "test"style = "높이 : 30px; 너비 : 100px; 배경 : Lightgreen"> div </div> <button id = "btn"> div 요소는 초점 </button> <cript> btn.onclick = function () {test.tabindex = -1; test.focus (); } est활성화
document.activeElement 속성은 DOM 초점을 관리하고 현재 초점을 맞추는 요소를 저장하는 데 사용됩니다.
[참고]이 속성은 IE 브라우저에서 지원되지 않습니다
<div id = "test"style = "높이 : 30px; 너비 : 100px; 배경 : Lightgreen"> div </div> <button id = "btn"> div 요소는 Focus </button> <cript> console.log (document.actoviveElement)를 가져옵니다. test.focus (); console.log (document.activeElement); // <div>} </script>
집중하십시오
페이지로드, 사용자 입력 (탭 키 프레스), focus() 메소드 및 autofocus 속성을 포함하여 요소를 초점을 맞추는 4 가지 방법이 있습니다.
【1 load 페이지 로딩
기본적으로 문서가 방금로드되면 신체 요소에 대한 참조가 document.activeElement 에 저장됩니다. 문서로드 중에 document.activeElement 의 값은 널입니다
<cript> console.log (document.activeElement); // null </script> <body> <cript> console.log (document.activeElement); // <body> </script> </body>
【2 in 사용자 입력 (탭 키를 누릅니다)
사용자는 일반적으로 탭 키를 사용하여 초점을 이동하고 공간 표시 줄을 사용하여 초점을 활성화 할 수 있습니다. 예를 들어, 초점이 링크에있는 경우 현재 우주 막대를 누르면 링크로 이동합니다.
탭 키와 관련하여 tabindex 속성을 언급해서는 안됩니다. tabindex 속성은 현재 HTML 요소 노드가 탭 키에 의해 트래버스되고 Traversal의 우선 순위를 지정하는 데 사용됩니다.
1. tabindex=-1 인 경우 탭 키가 현재 요소를 건너 뜁니다.
2. tabindex=0 이면 탭 키가 현재 요소를 가로 지르는 것을 의미합니다. 요소가 tabindex 설정하지 않으면 기본값은 0입니다.
3. tabindex 0보다 크면 탭 키가 먼저 횡단되었음을 의미합니다. 값이 클수록 우선 순위가 작습니다
다음 코드에서 탭 키를 사용할 때 버튼이 초점을 맞추는 순서는 2, 5, 1 및 3입니다.
<div id = "box"> <button tabindex = "3"> 1 </button> <버튼 tabindex = "1"> 2 </button> <버튼 tabindex = "0"> 3 </button> <button tabindex = "-1"> 4 </button> <버튼 = "2"> 5 </button> </div> <cript> box.onkeyup = function () {actube. '핑크';} </script>【3 (포커스 ()
focus() 메소드는 브라우저의 초점을 양식 필드로 설정하는 데 사용됩니다. 즉, 키보드 이벤트에 응답 할 수 있도록 양식 필드를 활성화합니다.
[참고] 앞에서 언급했듯이 양식 요소가 아닌 경우 tabIndex 로 -1로 설정하면 집중할 수도 있습니다.
<span id = "test1"style = "높이 : 30px; 너비 : 100px;"> span </span </span id = "test2"value = "input"> <button id = "btn1"> 스팬 요소가 초점을 가져옵니다. function () {test1.tabindex = -1; test1.focus ();} btn2.onclick = function () {test2.focus ();} </script>4 of autofocus
autofocus 특성이 HTML5 폼 필드에 추가되었습니다. 이 속성이 설정되는 한, 초점은 JavaScript없이 해당 필드로 자동 이동할 수 있습니다.
[참고]이 속성은 폼 요소에만 사용될 수 있습니다. 일반 요소가 tabIndex=”-1″ 로 설정 되더라도 적용되지 않습니다.
<입력 자동 초점 값 = "ABC">
hasfocus ()
document.hasFocus() 메소드는 현재 문서의 모든 요소가 활성화되었는지 또는 초점을 맞추는지를 나타내는 부울 값을 반환합니다. 문서가 초점을 맞추 었는지 확인하면 페이지와 상호 작용하는지 알 수 있습니다.
console.log (document.hasfocus ()); // true // 2 초 이내에 다른 탭을 클릭하여 초점을 설정하십시오.
집중력을 잃습니다
JavaScript를 사용하여 초점을 잃는 경우 blur() 메소드를 사용해야합니다.
blur() 메소드의 기능은 요소에서 초점을 제거하는 것입니다. blur() 메소드를 호출 할 때 초점은 특정 요소로 전송되지 않습니다. 메소드를 호출하는 요소에서 초점을 제거하는 것입니다.
<입력 id = "test"type = "text"value = "123"> <button id = "btn1"> 입력 요소 초점 </button> <버튼 id = "btn2"> 입력 요소가 초점을 잃는다 </buttone> <cript> btn1.onclick = function () {test.focus ();} btn2.onclick = function () {blur ()};초점 이벤트
초점 이벤트는 페이지가 초점을 얻거나 잃을 때 트리거됩니다. 이러한 이벤트를 사용하고 document.hasFocus() 메소드 및 document.activeElement 속성을 사용하면 페이지의 사용자의 위치를 알 수 있습니다.
초점 이벤트에는 다음 4가 포함됩니다
1. 블러
요소가 초점을 잃으면 blur 이벤트가 발사됩니다. 이 이벤트는 버블 링되지 않습니다
2. 초점
요소가 초점을 맞출 때 focus 이벤트가 발사됩니다. 이 이벤트는 버블 링되지 않습니다
3. Focusin
요소가 초점을 맞출 때 focusin 이벤트가 발사됩니다. 이 이벤트는 focus 이벤트와 동일하지만 버블 링
4. 포커스 아웃
요소가 초점을 잃으면 focusour 이벤트가 발사됩니다. 이 이벤트는 블러 이벤트와 동일하지만 거품
[참고] DOM0 레벨 이벤트 핸들러를 지원하는 IE 브라우저를 제외하고 FocusIn 및 Focusout 이벤트와 관련하여 다른 브라우저는 DOM2 레벨 이벤트 핸들러 만 지원합니다.
<div id = "box"style = "display : inline-block; padding : 25px; 배경색 : lightgreen;"> <div id = "boxin"style = "높이 : 50px; 너비 : 50px; 배경 색;"> 123 </div> </div> </div> <buttn1 "> content with content </div ind id id id with with with with with with with Focus </button> <button id = "Reset"> 복원 </button> <cript> reset.onclick = function () {histor.go ();} // focus () 메소드 btn1.onclick = function () {boxin.tabindex = -1; boxin.focus ();} // blur () 메소드 btn2.onclick = function () {boxin.blur ();} // focusin event if (boxin.addeventlistener) {boxin.addeventlistener ( 'focusin', handler)} else {boxin.onfocusin = handler () = 'lightblue';} if (box.addeventListener) {box.adeventListener ( 'focusin', handler)} else {box.onfocusin = handler;} // blur 이벤트 함수 fnblur () {this.style.backgroundcolor = 'Orange';} boxin.onblur; box.onblur; box.onblur; 실행 결과에서 우리는 focusin 이벤트가 거품이 될 수 있음을 알 수 있습니다. blur 이벤트는 거품이 없습니다.
포커스 이벤트는 종종 폼 디스플레이 및 검증에 사용됩니다.
예를 들어, 초점을 맞추면 배경색을 수정하십시오. 초점을 잃으면 배경색을 복원하고 확인하십시오.
<div id = "box"> <input1 "input1"type = "text"placeholder = "enline numbers"> <input2 "input2"type = "text"placeholder = "만 입력"> <span id = "tip"> </div> <script> if (box.addeventlistener) {box.addeventlestener (foccustin)); box.addeventListener ( 'focusout', fnout);} else {box.onfocusin = fnin; box.onfocusout = fnout;} 함수 fnin (e) {e = e || 이벤트; var target = e.target || e.srcelement; target.style.backgroundcolor = 'Lightgreen';} 함수 fnout (e) {e = e || 이벤트; var target = e.target || e.srcelement; target.style.backgroundColor = '초기'; // if (target === input1) {if (!/^/d*$/. test (target.value.trim ())) {target.focus (); tips.innerhtml = '숫자 만 입력하면 settimeout을 다시 입력하십시오 (function () {tips.innerhtml =' '}, 500); }} // if (target === input2) {if (!/^[/u4e00-/u9fa5]*$/. test (target.value.trim ()) {target.focus (); tips.innerhtml = '중국어 만 입력하십시오.'settimeout '을 다시 입력하십시오 (function () {tips.innerhtml =' '}, 500); }}}}} </script>요약
위의 내용은 초점 관리의 모든 내용을 JavaScript로 요약하는 것입니다. 이 기사는 자세히 소개되며 연구 및 작업에 대한 특정 참조 가치가 있습니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다.