Jquery: cách kích hoạt sự kiện nhấn khi nhấn phím enter

165

Tôi cần phải thực hiện một sự kiện nhấn nút khi nhấn phím enter.

Vì đó là vào thời điểm sự kiện không nổ súng.

Xin hãy giúp tôi với cú pháp nếu có thể.

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

đây là nỗ lực của tôi để kích hoạt sự kiện click vào enter.

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

jquery key-events

— Arianule
nguồn

Bạn có thể phải bao gồm trả lại sai hoặc mộte.preventDefault();

— geekchic

4

NHƯ một lưu ý phụ: e.keyCodekhông hoàn toàn là trình duyệt chéo. sử dụng e.whichthay thế.

— Hashem Qolami

4

Trong trường hợp này, bạn NÊN sử dụng keyupthay vì keypresshoặc keydown. keypress/ keydownsự kiện kích hoạt liên tục trong khi phím được nhấn: jsbin.com/uzoxuk/1/edit

— Hashem Qolami

307

thử cái này ....

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

Hiển thị đoạn mã

$(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>

Mở rộng đoạn trích

Tìm bản demo trong jsbin.com

— Vijay
nguồn

3

Trong trường hợp mọi người muốn nhận ra phím bấm "nhập" từ bất cứ đâu, bạn có thể thay thế $ ('# txtSearchProdAssign') và kích hoạt trên tài liệu $ (tài liệu) .keypress .......

— dave4jr

Có vẻ nghi vấn từ một quan điểm tiếp cận. Điều này chắc chắn sẽ hoạt động trên tất cả các loại thiết bị có phương pháp "lựa chọn" khác nhau?

— Jonny

26

Thử cái này

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

Hy vọng nó sẽ giúp bạn

— Neeraj Dubey
nguồn

4

Ý bạn là if((event.keyCode || event.which) == 13)sao vâng, nó hoàn toàn là trình duyệt chéo hỗ trợ Tabkhóa trong FF.

— Hashem Qolami

Theo API , event.keyCodelà dư thừa, chỉ cần sử dụng event.which.

— konyak

12

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

Tôi cũng vừa tìm thấy Gửi một biểu mẫu trên 'Enter' bao gồm hầu hết các vấn đề một cách toàn diện.

— đam mê
nguồn

8

Bạn đã gần như ở đó. Đây là những gì bạn có thể thử mặc dù.

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

Tôi đã sử dụng trigger()để thực hiện nhấp chuột và ràng buộc nó vào keyupsự kiện bắt đầu keydownbởi vì clicksự kiện bao gồm hai sự kiện thực sự tức là mousedownsau đó mouseup. Vì vậy, để giống với những thứ tương tự có thể với keydownvà keyup.

Đây là một bản demo

— Rohit416
nguồn

4

Một bổ sung khác để thực hiện:

Nếu bạn tự động thêm một đầu vào, ví dụ như sử dụng append(), bạn phải sử dụng on()hàm jQuery .

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

CẬP NHẬT:

Một cách thậm chí hiệu quả hơn để làm điều này sẽ là sử dụng một câu lệnh chuyển đổi. Bạn có thể thấy nó sạch hơn, quá.

Đánh dấu:

<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;
  }
});

— Daniel Dewhurst
nguồn

1

IMO sử dụng câu lệnh chuyển đổi cho một điều kiện duy nhất là quá mức cần thiết.

— nyuszika7h

Tuy nhiên, nó hiệu quả hơn một câu lệnh if.

— Daniel Dewhurst

2

Tôi không tin bạn. Bạn có thể trích dẫn một nguồn?

— Rolf

3

Bạn đang cố gắng bắt chước một lần nhấp vào nút khi nhấn phím enter? Nếu vậy bạn có thể cần phải sử dụng triggercú pháp.

Hãy thử thay đổi

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

đến

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

Nếu đây không phải là vấn đề thì hãy thử xem lại cú pháp chụp khóa của bạn bằng cách xem các giải pháp trong bài đăng này: jQuery Event Keypress: Phím nào được nhấn?

— Shaun
nguồn

Từ api.jquery.com/click - Phương thức này là lối tắt cho .on ("click", handler) trong hai biến thể đầu tiên và .trigger ("click") trong phần ba. do đó sẽ làm chính xác như vậy.

— Capsule

1

Thử cái này

<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>

— Vishnu Prasad
nguồn

1

Bạn có thể sử dụng mã này

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

— cát kumar
nguồn

1

Chỉ cần bao gồm hàm notifyDefault () trong mã,

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

— Arron
nguồn

0

Jquery: Sự kiện bấm nút bằng cách sử dụng nút Enter Nhấn try ::

tabindex = "0" onkeypress = "return EnterEvent (sự kiện)"

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

— JIYAUL MUSTAPHA
nguồn

0

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

Mở rộng đoạn trích

— Supriya
nguồn

-4

Điều này dường như là hành vi mặc định bây giờ, vì vậy nó đủ để làm:

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

Bạn có thể thử nó trong JSFiddle này

Đã thử nghiệm trên: Chrome 56.0 và Firefox (Phiên bản Dev) 54.0a2, cả hai đều có jQuery 2.2.x và 3.x

— xDaizu
nguồn

2

Điều này dường như không bắt được một báo chí 'trở lại' nào cả.

— klokop

@klokop Bạn đã sai, điều này bắt một 'trở lại' hoặc 'nhập'. Tôi vừa thử bản thân với jQuery 3 trên FF 63, Chrome 69, Safari 10.0.1 và Opera 55, cả trên liên kết của họ và trên một trang web riêng mà tôi đã tạo để tự kiểm tra điều này. Đó là +1 từ tôi.

— hyperum

bạn đang sử dụng một nút, enter sẽ kích hoạt các nút và <a> thẻ nhưng trên một khoảng nói hoặc vì OP có trường nhập thông thường, đây không phải là trường hợp.

— Nickfmc