텍스트 입력 필드에서 Enter 키 감지


299

특정 입력에서 Enter 키를 누르면 기능을 수행하려고합니다.

내가 뭘 잘못하고 있니?

$(document).keyup(function (e) {
    if ($(".input1").is(":focus") && (e.keyCode == 13)) {
        // Do something
    }
});

Enter 키를 누르면 .input1기능 을 수행하는 더 좋은 방법이 있습니까?


답변:


499
$(".input1").on('keyup', function (e) {
    if (e.keyCode === 13) {
        // Do something
    }
});


//keyup not compatible with Jquery select(), Keydown is.

어떤 브라우저에서 테스트 했습니까? 이전 버전의 IE는 문서에서 키 업 이벤트를 트리거하지 않는다고 생각합니다 (그러나 확실하지는 않습니다).
Joseph Silber

2
.is ()를 사용하고 == 대신 ===가 필요했기 때문에 코드가 작동하지 않았습니다. 자세한 내용은 내 답변을 참조하십시오.
wesbos

6
그것은 아니에요 @jQuerybeast 필요 하고, event.keyCodeA는 Number자바 스크립트와 같은 조치를 취할 것입니다, 그래서 =====.
alex

7
e.which 더 유용 크로스 브라우저로 선언
모하마드 eslahi 사니

2
속성은 which, code, charCodekeyCode되지 않습니다 developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent이 , 당신의 대답에 실제 정보를 추가하십시오.
Sasay

120

event.key === "입력"

가장 최근의 클리너 :을 사용하십시오 event.key. 더 이상 임의의 숫자 코드가 없습니다!

const node = document.getElementsByClassName(".input")[0];
node.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // Do work
    }
});

jQuery를 사용해야하는 경우 :

$(document).keyup(function(event) {
    if ($(".input1").is(":focus") && event.key == "Enter") {
        // Do work
    }
});

모질라 문서

지원되는 브라우저


6
일반 자바 스크립트 버전에 대한 칭찬, 확실하지 왜 다른 모든 JQuery와에
선장 환상적인

7
OP는 자신의 예제 코드를 jQuery에 넣고 jQuery에 태그를 지정하기 때문입니다.
Tigerrrrr

44
$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

또는 입력 자체에 바인딩하십시오.

$('.input1').keyup(function (e) {
    if (e.keyCode === 13) {
       alert('ya!')
    }
  });

필요한 keyCode를 확인하려면 웹 사이트 http://keycode.info를 사용하십시오.


감사합니다. 나는 새로운 것을 배웠다. 그건 그렇고 나는 .is ()를 많이 사용 했으므로 논리가 아니며 작동하지 않아야합니다. 또한 ==, 다른 상황에서는 다시 두 개의 ==을 사용했습니다
jQuerybeast

np, 항상 ===을 사용해야합니다
wesbos

12

Enter텍스트 상자에서 누른 키 를 감지하려면 이것을 시도하십시오 .

$(function(){

$(".input1").keyup(function (e) {
    if (e.which == 13) {
        // Enter key pressed
    }
 });

});

6

이 질문에 대답하기에는 너무 늦을 수 있습니다. 그러나 다음 코드는 단순히 enter 키를 방지합니다. 복사하여 붙여 넣기 만하면됩니다.

        <script type="text/javascript"> 
        function stopRKey(evt) { 
          var evt = (evt) ? evt : ((event) ? event : null); 
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
          if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
        } 

        document.onkeypress = stopRKey; 

        </script>

6

내가 찾은 가장 좋은 방법은 사용 keydown하는 keyup것입니다 (나에게 잘 작동하지 않음).

참고 : 일반적으로 Enter 키를 누를 때 일부 작업을 수행하려고 할 때 양식 제출을 원하지 않는 것이므로 양식 제출을 비활성화했습니다. :)

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});

이 더 나은 그래서 event.keyCode가 아닌 event.which되지 않습니다
알렉스

3

나를 위해 일하는 해결책은 다음과 같습니다.

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // do something
    }
});

1

텍스트 상자에서 Enter 키를 눌렀는지 감지하십시오.

$(document).on("keypress", "input", function(e){
    if(e.which == 13){
        alert("Enter key pressed");
    }
});

데모


0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });

0

이 코드는 전체 사이트에서 모든 입력을 처리했습니다. 입력 필드 내에서 ENTER 키를 확인하고 TEXTAREA 또는 다른 곳에서는 멈추지 않습니다.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.