• 회원가입
  • 로그인
  • 구글아이디로 로그인

[DOM_Element] JS - accessKey 속성 - 요소접근키 (= accessKey속성 = 액세스키속성) ※ 요소접근단축키

accessKey 예제

 

<a id="hz" href="https://homzzang.com/">홈짱닷컴</a><br>


<ul>

  <li>IE, Chrome, Safari, Opera 15+ : ALT + <em>accesskey</em></li>

  <li>Opera prior version 15: SHIFT +  ESC + <em>accesskey</em></li>

  <li>Firefox: ALT + SHIFT + <em>accesskey</em></li>

</ul>


<script>

document.getElementById("hz").accessKey = "h";

</script>

 

결과보기

PS. 윈도우 chrome 브라우저에서, (Alt + h)키 누르면, 링크 클릭 효과 발생.

 

accessKey 정의

 

요소 접근 단축키 지정하는 속성.

 


 

1. accessKey 지원태그 종류

A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA

 

(예제1)

<input type="submit" value="확인" class="btn_submit btn" accesskey="s">


(예제2)

<button type="submit" id="btn_submit" accesskey="s" class="btn_submit btn">작성완료</button>

 

2.

OS/브라우저 종류에 따라, 해당 단축키와 조합하는 키가 다름.

 

3.

링크에 단축키 지정 시 브라우저에 따라 작동방식도 미세하게 다름.

  • IE 브라우저: 해당 링크에 포커스만 줌. (페이지 이동은 발생 X)
  • 타 브라우저: 해당 페이지로 바로 이동.

 

 

accessKey 브라우저별 단축키

   OS    

Browser

accesskey

Win    IE, chrome, safari    alt + 단축키
   firefox    alt + shift + 단축키
   opera    shift + esc + 단축키

Mac

   safari, chrome    control + option + 단축키
   firefox    control + 단축키
   opera    shift + esc + 단축키



분류 제목
DOM_Document JS - defaultView 속성 - 윈도우객체 (Window Object)
DOM_Document JS - designMode 속성 - 편집기능 활성화 (= 디자인모드)
DOM_Document JS - document.doctype 속성 -문서타입 (= DTD정보 = DocumentType 객체 반환…
DOM_Document JS - documentElement 속성 ★ - html요소 의미 (= 전체 웹문서 자체 = HTML 문서…
DOM_Document JS - documentMode 속성 - 문서로드IE버전 (IE전용)
DOM_Document JS - documentURI 속성 ★ - 현재웹문서위치 (= 웹문서주소)
DOM_Document JS - domain 속성 ★ - 현재웹문서의 도메인
DOM_Document JS - domConfig 속성 - 사용폐기. 돔구성
DOM_Document JS - embeds 속성 - 모든 엠베드태그 모음
DOM_Document JS - execCommand() 메서드 - 명령실행 (IE9 이상. 실험중) (예: 키보드이벤트때 실행)
DOM_Document JS - forms 속성 - 폼요소개수
DOM_Document JS - fullscreenElement 속성 - 전체화면요소 반환 (IE11 이상 접두어필요)
DOM_Document JS - fullscreenEnabled 속성 - 전체화면모드 (=풀스크린모드) 허용 (IE11 이상 접두어…
DOM_Document JS - getElementById() 메서드 ★★★ - 아이디선택자 (= 아이디로 요소얻기 = 아이디로 요…
DOM_Document JS - getElementsByClassName() 메서드 ★★ - 클래스선택자 (= 클래스명선택자 = 클…
DOM_Document JS - getElementsByName() 메서드 ★ - 네임선택자
DOM_Document JS - getElementsByTagName() 메서드 ★ - 태그선택자 (= 요소선택자 = getElem…
DOM_Document JS - hasFocus() 메서드 ★ - 포커스 상태인지 체크 (= hasFocus메서드 = 해즈포커스메서…
DOM_Document JS - head 속성 - 헤드요소 (IE9 이상)
DOM_Document JS - images 속성 - 모든 이미지태그 모음 (= 이미지즈 컬렉션 = 이미지스 집합)
25/67
목록
찾아주셔서 감사합니다. Since 2012