다연이네

[days01] tabindex, accesskey 본문

Web/JavaScript

[days01] tabindex, accesskey

　다연　 2020. 12. 9. 20:50
반응형

1. tabindex

사용자가 탭 키를 누를 경우 지정한 순서대로만 포커스가 이동하게 된다.


2. accesskey

자주 사용하는 폼을 위한 엑세스키이다. 사용자가 해당 키를 누르면 해당 레이블과 연결된 필드로 포커스가 이동한다.
<input type="text" accesskey="x" >

==>  alt + x를 누르면 focus가 집중된다 (x는 다른 문자로 변경 가능)

 

 

. js 요소의 내용을 변경
이벤트: 키다운, 키업, 키프레스

 

- 1번 박스를 클릭하면 배경이 노란색이 되고, 아무 문자나 작성하면 밑의 2번 박스에 고대로 출력된다.

- 1번 박스와 2번 박스는 tab키로 이동이 가능하다.

- 포커스가 맞춰지지 않은 상태이거나, 다른곳에 맞춰진 상태에서 alt+x를 누르면 1번 박스에 포커스가 맞춰진다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name ="viewport" content ="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
 * {
  box-sizing: border-box;
  margin: 0;
  padding:0;
 }
 input[type=text] {
  border: 1px solid gray;
  padding :5px;
  font-size: 20px;
  margin: 2px;
  width: 90%;
 }
  input[type=text]:focus {
  background-color: yellow;
  }
</style>
</head>
<body>


<!-- accesskey="x"라면, alt + x를 누르면 focus가 집중된다 -->
<input type="text" id="txtbox1" tabindex="1" accesskey="x"	
 onkeydown="" 
 onkeypress=""
 onkeyup="txtbox1_keyup();"/> 
<br>
<input type="text" id="txtbox2" tabindex="2"/>

<script>
 function txtbox1_keyup() {
   /*  console.log(event.keyCoe+"/"+String.fromCharCode(event.keyCode)); */
   							//65 / A <- 아스키코드/문자
   /* console.log(document.getElementById("txtbox1").value); */
   document.getElementById("txtbox2").value=
                                   document.getElementById("txtbox1").value;
 }
</script>

</body>
</html>

 

위의 코딩을 jQuery로 변경해보자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name ="viewport" content ="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
 * {
  box-sizing: border-box;
  margin: 0;
  padding:0;
 }
 input[type=text] {
  border: 1px solid gray;
  padding :5px;
  font-size: 20px;
  margin: 2px;
  width: 90%;
 }
  input[type=text]:focus {
  background-color: yellow;
  }
</style>


<script>
$(document).ready(function() {
	$("#txtbox1").keyup(function(event){
			//jquery 코딩 안의 event 객체와 밑에서 사용했던 js의 이벤트객체는 다른 것이다.
		//console.log(event.which +" / "+ event.keyCode +" / "+ event.key);
			//which = keyCode
		$("#txtbox2").val( $(this).val() ); //.val() = jquery 함수
			//설정하기				얻어오기
		
	})
});
</script>


</head>
<body>

<input type="text" id="txtbox1" tabindex="1" accesskey="x"/>
<br>
<input type="text" id="txtbox2" tabindex="2"/>

<!-- <script>
  function txtbox1_keyup() {
   /*  console.log(event.keyCoe+"/"+String.fromCharCode(event.keyCode)); */
   														//아스키코드 값 출력
   /* console.log(document.getElementById("txtbox1").value); 
   document.getElementById("txtbox2").value=
                                   document.getElementById("txtbox1").value;
 } 
</script>
 -->
</body>
</html>
반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days01] 버튼으로 전구 켜고끄기  (0) 2020.12.09
[days01] event.srcElement 속성  (0) 2020.12.09
[days01] x.innerHTML == $("#").html($("#").val())와 jQuery의 if문  (0) 2020.12.09
[days01] 버튼 누르면 border 스타일 변경  (0) 2020.12.09
[days01] 자바스크립트  (0) 2020.12.08
'Web/JavaScript' Related Articles more
Comments