데이터 유효성 검사 및 확인과 같은 시나리오에서는 사용자가 키보드에서 누른 키를 한 번 눌렀을 때마다 필드 요소의 스타일이 변경됩니다. 각 키 누르기 또는 놓기와 관련된 스타일 변경은 jQuery에서 제공하는 이벤트 핸들러를 통해 수행됩니다. 구체적으로 말하자면, 누른 키를 놓을 때 함수를 처리하거나 호출하는 이벤트 핸들러 또는 메서드는 ' 키업 ()' 방법.
반면에 기능 키가 눌러지는 것을 처리하거나 호출하는 메서드는 ' 키다운 ()” 메소드를 사용하면 관련 항목을 확인할 수 있습니다. 기사 이 이벤트를 위해.
이번 블로그에서는 jQuery keyup() 메소드에 대해 간략하게 설명하겠습니다.
jQuery keyup() 메서드를 사용하는 방법은 무엇입니까?
jQuery는 “ 키업 ()” 메서드는 사용자가 선택한 필드 내에서 키를 누르거나 입력하는 것을 멈출 때마다 익명 기능을 트리거합니다. 이 방법은 선택한 요소에 실시간으로 동적 스타일을 적용하는 데에도 사용됩니다.
통사론
keyup() jQuery 메소드에 사용되는 구문은 다음과 같습니다.
$ ( '이것' ) . 키업 ( customFunc )
위 구문에서 “ 이것 ”는 선택된 HTML 요소이고 “ customFunc '는 '에 의해 실행되는 기능입니다. 키업 '에 대한 '메소드 이것 '.
더 깊은 이해를 위해 몇 가지 예를 들어보겠습니다.
예제 1: 'keyup()' 메서드를 사용하여 텍스트 색상 변경
이 경우 아래와 같이 사용자가 이미 누른 키를 놓으면 입력된 텍스트의 색상이 다른 색상으로 변경됩니다.
< HTML >
< 머리 >
< 스크립트 소스 = 'https://code.jquery.com/jquery-3.7.0.js' >< / 스크립트 >
< 스크립트 >
$(문서).ready(함수() {
$('#demo').keyup(function() {
$('#demo').css('color', 'forestgreen');
});
});
< / 스크립트 >
< / 머리 >
< 몸 >
< div >
Linuxhint 데이터를 입력하세요: < 입력 ID = '데모' 유형 = '텍스트' / >
< / div >
< / 몸 >
< / HTML >
위 코드에 대한 설명은 다음과 같습니다.
- 먼저, 여기를 방문하여 온라인 CDN을 삽입하여 jQuery를 프로젝트로 가져옵니다. 링크 공식 문서의.
- 다음으로, ' 문서 ” 또는 페이지가 로드됩니다. 이 함수는 ID가 'demo'인 HTML 요소를 선택하고 ' 키업 ()” 메소드를 사용합니다.
- “ 키업 ()' 메소드는 '를 사용하는 콜백 함수를 호출합니다. CSS ()”를 사용하여 텍스트의 글꼴 색상을 “ 포레스트그린 '.
- 이제 선택한 “< 입력 >” 요소는 “< 내부에 있습니다. 몸 >' 태그를 지정하고 '라는 ID를 할당합니다. 데모 '.
컴파일 프로세스 완료 후 웹페이지 미리보기:
선택한 키를 놓았을 때 변경되는 텍스트 색상이 출력에 표시됩니다.
예 2: 배경색을 동적으로 변경하기
이 예에서는 사용자가 누른 키를 떠날 때마다 선택한 HTML 요소에 대해 다른 배경색이 설정됩니다. 이 시나리오의 코드를 살펴보겠습니다.
< 머리 >< 스크립트 소스 = 'https://code.jquery.com/jquery-3.7.0.js' >< / 스크립트 >
< 스크립트 >
backgroundShades를 보자 = [ '남옥' , '오렌지 레드' , '생도 블루' , '포레스트그린' ,
'라이트 그레이' , '샌디브라운' , '마젠타' , '벌리우드' ] ;
j하자 = 0 ;
$ ( 문서 ) .keyup ( 기능 ( 이벤트 ) {
$ ( '#hgg' ) .css ( '배경색' , 배경색 [ 제이 ] ) ;
j++;
제이 = 제이 % 9 ;
} ) ;
< / 스크립트 >
< / 머리 >
< 몸 >
< h1 스타일 = '색상: 씨그린' >리눅스힌트 기사< / h1 >< br >
< div ID = '으응' 스타일 = '패딩: 10px' >
< h2 >다른 설정에 사용되는 jQuery 키업 배경 Key를 놓을 때마다.< / h2 >
< br / >
< / div >
< / 몸 >
위 코드에 대한 설명:
- 처음에는 “<” 안에 jQuery CDN을 추가하여 프로젝트에 jQuery를 가져옵니다. 머리 >” 태그입니다.
- 그런 다음 '라는 이름의 배열을 만듭니다. 배경음영 ”에는 무작위로 8가지 색상이 포함되어 있습니다.
- 다음으로는 “ 키업 ()” 메소드가 “에 첨부됩니다. 문서 ” 그리고 익명 콜백 함수를 호출합니다. 이 함수는 ID가 ''인 HTML 요소를 선택합니다. ㅋㅋㅋ ” 그리고 CSS를 적용합니다 “ 배경색 ' 재산.
- 배열 “ 배경음영 '는 CSS 속성의 값으로 전달되고 인덱스는 ' 제이 ” 변수입니다. 이 변수는 매번 1씩 증가하고 ' 0 ” 값이 “에 도달할 때의 인덱스 8 '. 배열의 최대 인덱스는 “ 7 '.
- 그런 다음 선택한 ' div ' ID가 '인 요소 ㅋㅋㅋ ”, 이 요소의 배경색은 누른 키를 놓으면 변경됩니다.
컴파일 후 웹페이지 미리보기:
출력에서는 누르거나 선택한 키를 놓을 때마다 선택한 HTML 요소의 배경색이 변경된다는 것을 확인합니다. 그것은 '를 사용하는 것에 관한 것입니다. 키업 ()' 방법.
결론
jQuery는 “ 키업 ()” 메서드는 누른 키를 놓았을 때 선택한 HTML 요소에 대한 콜백 함수를 트리거합니다. 이 메서드는 키를 눌렀을 때 호출되지 않지만, 키를 놓거나 키를 눌렀을 때 콜백 함수를 실행합니다. 이 블로그에서는 jQuery keyup() 메소드의 사용법과 작동에 대해 설명했습니다.