jquery : Enter 키를 누를 때 클릭 이벤트를 트리거하는 방법

165

키 입력을 누를 때 버튼 클릭 이벤트를 실행해야합니다.

현재로서는 이벤트가 시작되지 않습니다.

가능한 경우 구문을 알려주십시오.

$(document).on("click", "input[name='butAssignProd']", function () {
   //all the action
});

이것은 클릭 이벤트를 시작하려고합니다.

$("#txtSearchProdAssign").keydown(function (e) {
  if (e.keyCode == 13) {
    $('input[name = butAssignProd]').click();
  }
});

jquery key-events

— 아리아 눌
소스

당신은 반환 허위 또는 포함 할 수 있습니다e.preventDefault();

— geekchic

4

부수적으로 AS는 e.keyCode완전히 크로스 브라우저가 아닙니다. 사용하는 e.which대신.

— Hashem Qolami

4

이 경우 keyup에는 keypress또는 대신에 사용해야 합니다 keydown. keypress/ keydown이벤트는 키를 누르고있는 동안 계속 트리거됩니다. jsbin.com/uzoxuk/1/edit

— Hashem Qolami

307

이것을 시도하십시오 ....

$('#txtSearchProdAssign').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

코드 스 니펫 표시

$(function() {

  $('input[name="butAssignProd"]').click(function() {
    alert('Hello...!');
  });

  //press enter on text area..

  $('#txtSearchProdAssign').keypress(function(e) {
    var key = e.which;
    if (key == 13) // the enter key code
    {
      $('input[name = butAssignProd]').click();
      return false;
    }
  });

});

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <textarea id="txtSearchProdAssign"></textarea>
  <input type="text" name="butAssignProd" placeholder="click here">
</body>

</html>

스 니펫 확장

jsbin.com에서 데모 찾기

— 비제이
소스

3

경우에 사람들은 어디에서 키를 누를 때, 당신은 $ ( '# txtSearchProdAssign') 및 문서 $ (문서) .keypress에 트리거 ....... 대체 할 수있다 "입력"인식 할

— dave4jr

접근성 관점에서 의심스러워 보입니다. 이것은 "선택"방법이 다른 모든 종류의 장치에서 확실히 작동합니까?

— Jonny

27

이 시도

$('#twitterSearch').keydown(function(event){ 
    var keyCode = (event.keyCode ? event.keyCode : event.which);   
    if (keyCode == 13) {
        $('#startSearch').trigger('click');
    }
});

그것이 당신을 돕는 희망

— 네 라즈 듀 베이
소스

4

당신은 의미 했습니까 if((event.keyCode || event.which) == 13)? 예, TabFF의 키 를 지원하는 완전히 크로스 브라우저입니다 .

— Hashem Qolami

에 따르면 API , event.keyCode중복, 단지 사용하는 것입니다 event.which.

— konyak

12

$('#txtSearchProdAssign').keypress(function (e) {
  if (e.which == 13) {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

또한 'Enter'양식을 제출하여 대부분의 문제를 포괄적으로 다루는 것을 발견했습니다 .

— 괴짜
소스

8

거의 다 왔습니다. 시도해 볼 수있는 것은 다음과 같습니다.

$(function(){
  $("#txtSearchProdAssign").keyup(function (e) {
    if (e.which == 13) {
      $('input[name="butAssignProd"]').trigger('click');
    }
  });
});

내가 사용하고 trigger()클릭을 실행하고 바인드 그것은에 keyup이벤트의 insted keydown때문에 click실제로 즉 두 이벤트의 이벤트 포함 mousedown다음 mouseup. 그래서와 가능한 한 같은 일 닮은 keydown와 keyup.

여기 데모가 있습니다

— 로 히트 416
소스

4

또 다른 추가 사항 :

예를 append()들어을 사용 하여 입력을 동적으로 추가하는 경우 jQuery on()함수를 사용해야합니다 .

$('#parent').on('keydown', '#input', function (e) {
    var key = e.which;
    if(key == 13) {
        alert("enter");
        $('#button').click();
        return false;
    }
});

최신 정보:

보다 효율적인 방법은 switch 문을 사용하는 것입니다. 더 깨끗하게 찾을 수 있습니다.

마크 업 :

<div class="my-form">
  <input id="my-input" type="text">
</div>

jQuery :

$('.my-form').on('keydown', '#my-input', function (e) {
  var key = e.which;
  switch (key) {
  case 13: // enter
    alert('Enter key pressed.');
    break;
  default:
    break;
  }
});

— 다니엘 듀 허스트
소스

1

단일 조건에 대해 switch 문을 사용하는 IMO는 과도합니다.

— nyuszika7 시간

그래도 if 문보다 효율적입니다.

— Daniel Dewhurst

2

나는 당신을 믿지 않습니다. 출처를 인용 할 수 있습니까?

— Rolf

3

Enter 키를 눌렀을 때 버튼 클릭을 모방하려고합니까? 그렇다면 trigger구문 을 사용해야 할 수도 있습니다 .

바꿔보십시오

$('input[name = butAssignProd]').click();

에

$('input[name = butAssignProd]').trigger("click");

이것이 문제가 아닌 경우이 게시물의 솔루션을보고 키 캡처 구문을 다시 살펴보십시오. jQuery Event Keypress : 어떤 키를 눌렀습니까?

— 숀
소스

에서 api.jquery.com/click -이 방법은 1/3 ( "클릭")에 대한 바로 가기 CSTE 연구진은 처음 두 변이 ( "클릭"핸들러)이며, .trigger. 정확히 똑같이 할 것입니다.

— Capsule

1

이 시도

<button class="click_on_enterkey" type="button" onclick="return false;">
<script>
$('.click_on_enterkey').on('keyup',function(event){
  if(event.keyCode == 13){
    $(this).click();
  }
});
<script>

— 비슈누 프라 사드
소스

1

이 코드를 사용할 수 있습니다

$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
       alert('You pressed a ENTER key.');
    }
});

— Sandeep Kumar
소스

1

코드에 preventDefault () 함수를 포함 시키면

$("#txtSearchProdAssign").keydown(function (e) 
{
   if (e.keyCode == 13) 
   {
       e.preventDefault();
       $('input[name = butAssignProd]').click();
   }
});

— 아론
소스

0

jquery : 화재 버튼 클릭 이벤트 Enter 버튼 사용 다음을 시도하십시오. :

tabindex = "0"onkeypress = "복귀 EnterEvent (이벤트)"

 <!--Enter Event Script-->
    <script type="text/javascript">
        function EnterEvent(e) {
            if (e.keyCode == 13) {
                __doPostBack('<%=btnSave.UniqueID%>', "");
            }
        }
    </script>
    <!--Enter Event Script-->

— 자울 무스타파
소스

0

     $('#Search').keyup(function(e)
        {
            if (event.keyCode === 13) {
            e.preventDefault();
            var searchtext = $('#Search').val();
            window.location.href = "searchData.php?Search=" + searchtext + '&bit=1';
            }
        });

스 니펫 확장

— 수 프리 야
소스

-4

이것은 현재 기본 동작으로 보이므로 충분합니다.

$("#press-enter").on("click", function(){alert("You `clicked' or 'Entered' me!")})

이 JSFiddle에서 시도해 볼 수 있습니다

테스트 대상 : jQuery 2.2.x 및 3.x와 함께 Chrome 56.0 및 Firefox (Dev Edition) 54.0a2

— x 다 이즈
소스

2

이것은 '반환'언론을 전혀 잡지 못하는 것 같습니다.

— klokop

@klokop 당신이 틀 렸습니다. 이것은 '반환'또는 '입력'을 잡습니다. 방금 FF 63, Chrome 69, Safari 10.0.1 및 Opera 55의 jQuery 3을 링크와 직접 테스트하기 위해 만든 별도의 사이트에서 직접 시도했습니다. 그것은 +1입니다.

— hyperum

버튼을 사용하는 경우 enter는 버튼과 <a> 태그를 트리거하지만 범위에 대해 말하거나 OP에 일반 입력 필드가 있으므로 그렇지 않습니다.

— Nickfmc