이 글은 JavaScript에서 탭 키를 감지하도록 안내합니다.
JavaScript에서 탭 키를 감지하는 방법은 무엇입니까?
JavaScript에서 탭 키를 감지하려면 다음 기술을 적용하십시오.
- ' 쿼리 선택기() ' 방법
- ' getElementbyId() ' 방법
언급된 접근 방식은 하나씩 시연될 것입니다!
방법 1: document.querySelector() 메서드를 사용하여 JavaScript에서 탭 키 감지
' document.querySelector() ” 메서드는 CSS 선택자와 일치하는 첫 번째 요소에 액세스한 다음 addEventListener() 메서드가 액세스된 요소에 이벤트 핸들러를 추가합니다. 이러한 방법을 적용하여 입력 유형에 액세스하고 해당 값을 입력할 때 탭 키가 눌렸는지 여부를 감지할 수 있습니다.
통사론
요소. 추가 이벤트 리스너 ( 이벤트 , 기능 , 사용캡처 )
주어진 구문에서 ' 이벤트 '는 이벤트 이름, ' 기능 '는 이벤트가 발생했을 때 실행할 특정 함수이고 ' 사용캡처 '는 선택적 인수입니다.
문서. 쿼리 선택기 ( CSS 선택기 )위 구문에서 ' CSS 선택기 '는 document.querySelector() 메서드에서 지정할 수 있는 하나 이상의 CSS 선택기를 나타냅니다.
명시된 개념을 더 잘 이해하려면 다음 예를 살펴보십시오.
예시
먼저 입력 유형을 ' 텍스트 '에 초기 자리 표시자 값과 제목이 있는 '
< h2 > 결과 < / h2 >
다음으로 ' document.querySelector() '지정된 입력과 제목에 각각 액세스하고 '라는 이름의 변수에 저장하는 메서드 입력 ' 그리고 ' 결과 ':
입력하자 = 문서. 쿼리 선택기 ( '입력' ) ;결과를 보자 = 문서. 쿼리 선택기 ( 'h2' ) ;
이제 ' 키다운 ' addEventListener() 메서드를 사용하여 입력 필드가 있는 이벤트. 이 이벤트는 ' 탭 ' 키를 사용하여 다음 조건을 적용하여 입력 필드에서 ' 내부텍스트 ' 재산:
입력. 추가 이벤트 리스너 ( '키다운' , ( 그리고 ) => {만약에 ( 그리고. 열쇠 === '탭' ) {
결과. 내부텍스트 = '탭 키를 눌렀습니다' ;
} 또 다른 {
결과. 내부텍스트 = '탭 키를 누르지 않았습니다' ;
}
이 경우 사용자가 탭 키를 누르면 추가된 작업이 수행된 작업에 대해 알립니다.
방법 2: document.getElementbyId() 메서드를 사용하여 JavaScript에서 탭 키 감지
' 문서.getElementById() ” 메소드를 사용하여 해당 ID를 기반으로 특정 HTML 요소에 액세스할 수 있습니다. 이 메서드는 입력 필드를 가져오고 탭 키와 같은 특정 키를 누를 때마다 사용자에게 경고하는 이벤트를 추가하도록 구현할 수 있습니다.
통사론
문서. getElementById ( 집단 )주어진 구문에서 ' 집단 '는 지정된 요소의 ID를 나타냅니다.
다음 예를 살펴보겠습니다.
예시
아래 예에서는 이전 방법에서 설명한 대로 입력 유형과 자리 표시자 값을 포함합니다.
이제 '를 사용하여 입력 필드 ID를 가져옵니다. 문서.getElementById() ' 방법.
let input= document.getElementById('탭');
마지막으로 ' 키다운 '가 발생할 때마다 사용자에게 경고하는 addEventListener() 메서드 탭 ' 키를 눌렀을 때:
입력. 추가 이벤트 리스너 ( '키다운' , ( 그리고 ) => {만약에 ( 그리고. 열쇠 === '탭' ) {
알리다 ( '탭 키를 눌렀습니다' ) ;
}
} ) ;
산출
JavaScript에서 탭 키를 감지하는 가장 간단한 모든 방법에 대해 논의했습니다.
결론
JavaScript에서 탭 키를 감지하려면 ' 추가 이벤트 리스너() ' 이랑 ' document.querySelector() '입력 유형을 가져오고 지정된 키를 감지하는 이벤트를 적용하는 '메서드 또는 ' getElementbyId() ” id를 기반으로 입력 필드를 가져오고 추가된 조건이 충족될 때마다 사용자에게 알리는 방법입니다. 이 블로그는 JavaScript에서 탭 키 감지에 대해 안내했습니다.