jQuery를 사용하여 키보드에서 Enter를 누르는 것을 감지하는 방법은 무엇입니까?

731

사용자가 EnterjQuery를 사용하여 눌렀는지 여부를 감지하고 싶습니다 .

이것이 어떻게 가능한지? 플러그인이 필요합니까?

편집 : keypress()방법 을 사용해야하는 것 같습니다 .

해당 명령에 브라우저 문제가 있는지 아는 사람이 있는지 알고 싶었습니다. 브라우저 호환성 문제가 있습니까?

javascript  jquery  keyboard-events  enter  jquery-events 
— 크리스
소스
— Haim Evgi 2016 년
5
Javascript 프레임 워크에서 가장 좋은 점 중 하나는 기본적으로 브라우저 간 호환 가능해야한다는 것입니다. 브라우저 호환성 검사를 처리하여 사용자가 할 필요가 없습니다. JQuery 소스 코드를 읽지 못했지만 키 누름 기능이 그런 의미에서 다른지 의심합니다.
— miek
2
유일한 브라우저 호환성 문제는 e.keyCode 대신 e.which를 사용하여 ASCII 코드를 감지해야한다는 것입니다.
— Daniel
1
— Lemo

답변:

1330

jQuery의 요점은 브라우저 차이점에 대해 걱정할 필요가 없다는 것입니다. enter모든 브라우저에서 13 세 이상을 안전하게 사용할 수 있다고 확신 합니다. 따라서이를 염두에두고 다음을 수행 할 수 있습니다.

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
— 파올로 베르 간 티노
소스
7
나는 이것을 읽고 키 프레스가 IE에서 작동하지 않는 이유에 대해 머리를 긁적 거리기 때문에 이것을 연결하고 있습니다. ( $(window)IE 에서는 바인딩되지 않습니다 ) quirksmode.org/dom/events/keys.html
— 시크릿
17
e.keyCode는 100 % 크로스 브라우저가 아닙니다. 대신 아래에 표시된 것처럼 e를 사용하십시오
— Daniel
15
jQuery 문서에서 "event.which 속성은 event.keyCode 및 event.charCode를 정규화합니다. 키보드 키 입력을 위해 event.which를 보는 것이 좋습니다."
— Riccardo Galli 2018 년
20
$ (document) .on ( 'keypress', function (e) {
— user956584
5
이벤트 전파로 인해 주어진 함수를 여러 번 실행하고 있습니다 (즉, 경고가 두 번 발생합니다). 이를 중단하려면 함수 끝에 e.stopPropagation ()을 추가하십시오.
— dpb
129

"on enter key press"이벤트를보다 쉽게 ​​바인딩 할 수 있도록 작은 플러그인을 작성했습니다.

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

용법:

$("#input").enterKey(function () {
    alert('Enter!');
})
— 안드레아
소스
나를 위해이 작동하지 않음 (내가 가지고 #input온 <input>필드)
— Rápli 안드라스
1
#input 요소가 동적이라면 어떨까요?
— Jigar7521
@mplungjan "delegating"이 무슨 뜻인지 잘 모르겠습니다
— Andrea
$("#input").on("someevent","someselector",function () {})
— mplungjan
62

나는 일에 @Paolo Bergantino 게시 한 코드를 가져올 수 없습니다하지만 난 그것을 변경하는 경우 $(document)와 e.which대신 e.keyCode다음 내가 찾은 그 고장없이 작동 할 수 있습니다.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

JS Bin에 대한 예제 링크

— 이안 로크
소스
나를 위해 e. 그것은 IE와 함께 작동하지 않습니다. 다른 사람들에게도 효과가 있습니까?
— Umesh Rajbhandari
어떤 버전의 IE? IE7에서 잘 작동합니다.
— 이안 로크
jQuery 문서에서 "event.which 속성은 event.keyCode 및 event.charCode를 정규화합니다. 키보드 키 입력을 위해 event.which를 보는 것이 좋습니다."
— Riccardo Galli 2018 년
52

나는 이것이 더 크로스 브라우저와 호환되는 것을 발견했다.

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
— 예살
소스
1
Ternary IF는 다음과 같이 단축 할 수 있습니다. var keycode = event.keyCode || event.which;
— pistol-pete
29

jquery 'keydown'이벤트 핸들을 사용 하여이 작업을 수행 할 수 있습니다

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });
— 나스루딘
소스
11

event.key현대 JS를 사용하십시오 !

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

또는 jQuery없이 :

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

모질라 문서

지원되는 브라우저

— 지 볼트
소스
9

나는 누군가에게 도움이되기를 바랍니다.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});
— 사무엘 콰메 앤트 위
소스
7

위의 Andrea의 답변을 약간만 확장하면 수정 된 Enter 프레스 (예 : ctrl-enter 또는 shift-enter)를 캡처 할 때 도우미 방법이 더 유용합니다. 예를 들어이 변형은 다음과 같은 바인딩을 허용합니다.

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

사용자가 해당 양식의 텍스트 영역에 초점을 둔 상태에서 ctrl-enter를 누르면 양식을 제출합니다.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

( TEXTAREA에서 Ctrl + Enter jQuery 참조 )

— joeln
소스
4

경우에 따라 검색 필드 ENTER가있는 헤더 가 포함 된 아래 페이지와 같이 페이지의 특정 영역에 대해서는 키 를 표시 하지 않아야 할 수도 있습니다 .<div>

이 작업을 수행하는 방법을 알아내는 데 약간의 시간이 걸렸으며 커뮤니티를 위해 여기에 간단하지만 완전한 예제를 게시하고 있습니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

JSFiddle Playground에 링크 :이 [Submit]버튼은 아무것도하지 않지만 ENTER텍스트 상자 컨트롤 중 하나를 눌러도 양식이 제출되지 않습니다.

— jp2code
소스
2

이 keypress행사는 공식 사양에 포함되지 않기 때문에 실제 행사는 브라우저, 브라우저 버전 및 플랫폼마다 다를 수 있습니다.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>
스 니펫 확장

도움이 되길 바랍니다!

— Zoe_NS
소스
참고 keypress로 스펙에 있지 않은 이유 는 더 이상 사용되지 않기 때문입니다 ( MDN ).
— YellowAfterlife
그래서, L 편집 TNX ... <3
— Zoe_NS
0

사용자가 Enter 키를 눌렀는지 여부를 쉽게 감지하는 방법은 키 번호를 사용하고 Enter 키 번호는 = 13이며 장치의 키 값을 확인하는 것입니다.

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

Enter 키를 누르면 결과가 13이됩니다. 키 값을 사용하면 함수를 호출하거나 원하는 것을 할 수 있습니다

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

Enter 키를 누르면 버튼을 타겟팅하려면 코드를 사용할 수 있습니다 

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

도움이되기를 바랍니다.

— 사용자 2216399
소스
0

가장 간단한 방법은 바닐라 javacript를 사용하는 것입니다 .

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
— 듀안 워커
소스
0 
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
— 테이 펀 아지 코즈
소스
3
코드 작동 방식을 설명하기 위해 약간의 설명 주석을 추가 할 수 있습니까? 감사합니다.
— SaschaM78
0 
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
— 아지즈
소스
이것은 다른 답변의 적응처럼 보입니다. 다른 답변만큼 재미있게 설명을 추가 할 수 있습니까?
— 니코 하세
0

나는 사용했다 $(document).on("keydown").

일부 브라우저 keyCode에서는 지원되지 않습니다. 지원되지 않는 which경우 와 동일 keyCode하게 사용해야 which하며 그 반대도 마찬가지입니다.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
스 니펫 확장

— 저스틴 리우
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.