jQuery : keyPress 백 스페이스가 실행되지 않습니까?


186

내가 뭘 잘못하고 있는지 궁금해.

$(".s").keypress(function(e) {
   switch (e.keyCode) {
      case 8: // Backspace
      //console.log('backspace');
      case 9: // Tab
      case 13: // Enter
      case 37: // Left
      case 38: // Up
      case 39: // Right
      case 40: // Down
         break;

      default:
         doSearch();
   }
});

키를 doSearch()눌렀을 때 함수가 실행 되기를 원합니다 Backspace. 현재 BackspaceChrome과 Safari를 누르면 아무 일도 일어나지 않습니다 .

어떤 아이디어?


이 jQuery를 플러그인을 시도 할 수 있습니다 code.google.com/p/js-hotkeys 하고 "백 스페이스"키 별명 사용
호세 마누엘 루카스

3
크롬에서는 실행되지 않지만 Firefox에서는 실행됩니다.
vsync

necroposting에 대해 죄송하지만 e.keyCode보다 선호되는 e.
Henry Howeson

답변:


324

keyup대신에 사용하십시오 keypress. 사용자가 무언가를 누를 때 모든 키 코드를 얻습니다.


37
keyup백 스페이스에서 발생 keypress하지 않습니까?
Aaron Digulla

그 경우입니다. Keyup이 백 스페이스를 발생시키고 KeyPress가 이상하지 않습니다. cmd-c, cmd-v 또는 cmd-a와 같이 두 개의 키를 눌렀는지 확인할 수있는 기회가
있습니까?

17
실제로 키에 의존합니다. 당신이 사용하려는 keypress위해 Enter, 키 keydown에 대한 Backspace등등; 그렇지 않으면 일부 브라우저에서 이벤트가 예상대로 작동하지 않는 것을 발견 할 수 있습니다. 특히 키의 기본 동작을 방지하려는 경우. 잘못된 것을 사용하면 이벤트가 전혀 캡처되지 않거나 (Backspace의 경우와 같이) 이벤트를 막을 수 없습니다. 이벤트 처리 코드가 도착하기 전에 이미 발생하기 때문입니다.
srcspider

5
이 답변의 문제점은을 사용 keyup하면 숫자 패드손상 된다는 것 입니다. 전체 키보드에서 키를 올바르게 감지 할 수있는 답변을 알고 있습니까?
hughes

6
keydown모든 키에 대한 더 나은 옵션입니다
artfuldev

32

나는 이것을 직접 만났다. 나는 .on조금 다르게 보였지만 이것을했다 :

 $('#element').on('keypress', function() {
   //code to be executed
 }).on('keydown', function(e) {
   if (e.keyCode==8)
     $('element').trigger('keypress');
 });

여기에 내 작업을 추가하십시오. 사용자가 입력 한 ssn을 삭제해야하므로 jQuery 에서이 작업을 수행했습니다.

  $(this).bind("keydown", function (event) {
        // Allow: backspace, delete
        if (event.keyCode == 46 || event.keyCode == 8) 
        {
            var tempField = $(this).attr('name');
            var hiddenID = tempField.substr(tempField.indexOf('_') + 1);
            $('#' + hiddenID).val('');
            $(this).val('')
            return;
        }  // Allow: tab, escape, and enter
        else if (event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
        // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        else 
        {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) &&       (event.keyCode < 96 || event.keyCode > 105)) 
            {
                event.preventDefault();
            }
        }
    });

1
파이어 폭스이 작품 대신 event.keyCode의의 event.which 사용하는 경우 api.jquery.com/event.which
BishopZ

11

입력 사용 변경시에만 이벤트를 시작하려면 다음을 수행하십시오.

$('.s').bind('input', function(){
  console.log("search!");
  doSearch();
});

input키 코드도 관찰하지 않습니다. 이것은 작동하지 않습니다.
Mark Pieszak-Trilon.io

3

.keypress ()에 대한 jQuery 문서에 따르면 인쇄 할 수없는 문자를 포착하지 않으므로 키 누르기에서 백 스페이스가 작동하지 않지만 키 다운 및 키 업에서 포착됩니다.

브라우저가 키보드 입력을 등록하면 키 누르기 이벤트가 요소로 전송됩니다. 이것은 Shift, Esc 및 삭제 트리거 키 다운 이벤트 (키 누르기 이벤트 제외)와 같은 수정 자 및 비 인쇄 키를 제외하고 키 다운 이벤트와 유사합니다. 플랫폼과 브라우저에 따라 두 이벤트 간의 다른 차이점이 발생할 수 있습니다. ( https://api.jquery.com/keypress/ )

어떤 경우에는 키업이 바람직하지 않거나 다른 바람직하지 않은 효과가 있고 키 다운이 충분하기 때문에이를 처리하는 한 가지 방법은 keydown모든 키 스트로크를 포착하고 짧은 간격의 시간 초과를 설정하여 키를 입력 한 다음 처리하는 것입니다. 나중에.

jQuery(el).keydown( function() { 
    var that = this; setTimeout( function(){ 
           /** Code that processes backspace, etc. **/ 
     }, 100 );  
 } );
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.