jQuery 이벤트의 키보드 이벤트(양식 제출을 위한 Ctrl Enter 키 등)_jquery

키보드 이벤트는 텍스트 입력 영역 내부든 외부든 모든 사용자 키 입력을 처리합니다. 키보드 이벤트의 범위는 브라우저마다 다릅니다. 일반적으로 이러한 종류의 키보드 이벤트는 양식 요소, 태그 요소, 창 및 문서와 같은 요소에 작용할 수 있습니다. 키보드 이벤트는 교차점을 얻을 수 있는 모든 요소에 대해 발생 가능하며, 포커스를 얻을 수 있는 요소는 이렇게 이해할 수 있습니다. 해당 요소의 경우) 속성 값의 경우 tabindex가 음수로 설정된 경우 Tab 키를 사용해도 포커스를 얻지 못합니다.

키보드 이벤트는 매개변수 이벤트를 전달할 수 있습니다. 실제로 모든 jQuery 이벤트는 이러한 매개변수를 전달할 수 있습니다. 이 이벤트는 이벤트가 트리거될 때 이벤트를 사용하여 가져올 수 있습니다. 예를 들어 키보드를 사용할 때 event.keyCode를 사용하면 누른 키의 ASCII 코드 값을 얻을 수 있습니다. 아래를 참고하세요

1: keydown() 이벤트는 키보드를 클릭할 때 트리거되는 첫 번째 키보드 이벤트입니다. 사용자가 키를 계속 누르고 있으면 keydown 이벤트가 계속됩니다.

코드 복사 코드는 다음과 같습니다.

$('input').keydown( function(event ){
          Alert(event.keyCode); 
          });
위, 아래, 왼쪽 및 오른쪽 키(각각 38, 40, 37, 39)와 같이 키보드에서 반환하는 값을 통해 이러한 요소를 더 세부적으로 제어할 수 있습니다.

2: keypress() 이벤트는 한 가지 예외를 제외하고 keydown과 유사합니다. 키의 기본 동작을 방지해야 하는 경우 keypress 이벤트를 사용해야 합니다.

3: keyup() 이벤트는 (keydown 이벤트 이후) 발생하는 마지막 이벤트입니다. keydown 이벤트와 달리 이 이벤트는 키보드를 놓을 때 한 번만 트리거됩니다(키보드를 놓는 것은 연속적인 상태가 아니기 때문입니다). .

코드 복사 코드는 다음과 같습니다. $('input').keyup( funciton() {

         Alert('keyup 기능이 실행 중입니다!!');

          });



4: jQuery에서는 keydown, keypress 및 keyup 이벤트가 특정 순서로 실행됩니다.

코드 복사 코드는 다음과 같습니다. $('input').keyup( function() {

            console.log('keyup');

          });
실행 결과는 keydown, keypress, keyup입니다.
여기서는 경고를 사용하지 않는 이유는 경고 중에 일부 이벤트가 발생하지 않도록 하기 때문입니다. 이 코드를 실험하고 싶다면 Firefox에서 수행할 수 있으며 Firebug 플러그인을 브라우저에 설치해야 합니다. Firefox는 오픈 소스 브라우저이므로 안심하고 설치하세요. 오픈 소스 소프트웨어를 신뢰하십시오.

jQuery에는 이벤트 발생 순서에 따라 키보드 이벤트를 처리하는 세 가지 기능이 있습니다.





코드 복사

코드는 다음과 같습니다.

keydown();

keyup( );

keypress();

키다운()

키보드를 누르면 keydown 이벤트가 트리거됩니다. 브라우저의 기본 이벤트가 트리거되는 것을 방지하려면 바인딩 함수에서 false를 반환할 수 있습니다.

키업()

keyup 이벤트는 키를 놓았을 때 발생합니다. 즉, 키보드를 누르고 일어난 후의 이벤트입니다

키 누르기()

keypress 이벤트는 키를 탭할 때 발생하며 동일한 키를 누르고 떼는 것으로 이해할 수 있습니다.

A, Z 또는 Enter 버튼을 눌렀는지 어떻게 알 수 있나요?

키보드 이벤트는 매개변수 이벤트를 전달할 수 있습니다. 실제로 일부 jQuery 이벤트 함수는 이러한 매개변수를 전달할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$('input').keydown( function(event ){
alert(event.keyCode);
});

위 코드에서 event.keyCode는 우리가 누른 키가 무엇인지 알아내는 데 도움이 됩니다. 위쪽, 아래쪽, 왼쪽 및 오른쪽 키(각각 38, 40, 37, 39)를 반환합니다.

ctrl Enter를 구현하려면 Ctrl Enter를 눌러 양식을 제출하세요

코드 복사 코드는 다음과 같습니다.

$(document).keypress(function( e) {
if (e.ctrlKey && e.which == 13)
$("form").submit();
})

기타 참고사항:

사전 지식

1. 숫자 0 키 값 48.. 숫자 9 키 값 57
2. a 키 값 97.. z 키 값 122; A 키 값 65.. Z 키 값 90
3. 43;-키 값 45;.키 값 46;백스페이스 8;탭 키 값 9
4.event는 IE에서는 전역이고 Firefox에서는 임시 개체이며 매개 변수를 전달해야 합니다.

코드 복사 코드는 다음과 같습니다.

*/
jQuery.extend( {
/*=========================================== ==== ============================
기능 설명: 키 값 가져오기
호출 방법:
jQuery.getKeyNum(이벤트);
*/
getKeyNum:function(e){
var keynum;
if(window.event){ // IE
keynum = 이벤트 .keyCode;
}
else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
return keynum; 🎜>/*== =========================================== ====== ========================
함수 설명: 정수인지 확인하고, 편집 상자에 숫자만 입력하도록 제한합니다.
호출 방법:
해결해야 할 문제:
탭 키가 작동하지 않습니다. firefox.
*/
isInt.:function(e){
var keynum = this.getKeyNum(e)
if(keynum >= 48 && keynum <= 57 || keynum == 8){//firefox 판단 8에서 백스페이스 필요
return true;
}
return false
},
/*========= =========== ====================================== =========== ===
함수 설명: 소수점인지 확인합니다. 편집 상자를 숫자와 소수점 1자리로만 제한합니다.
호출 방법:
< input type="text" onkeypress="return jQuery. .isFloat(this,event);" />
*/
isFloat:function(txt,e){
var keynum = this.getKeyNum (e);
if(keynum == 46){//소수점 입력
if(txt.value.length == 0){
return false
}else if(txt. value.indexOf('.') >= 0) {
return false;
}else{
return true;
}
}
if(this.isInt(e )){
참을 반환합니다.
}
거짓을 반환합니다.
}
});