Jquery: วิธีเรียกใช้เหตุการณ์การคลิกเมื่อกดปุ่ม Enter

165

ฉันจำเป็นต้องเรียกใช้งานคลิกเหตุการณ์เมื่อกดปุ่ม Enter

มันเป็นในขณะที่เหตุการณ์ไม่ได้ถูกยิง

โปรดช่วยฉันด้วยไวยากรณ์ถ้าเป็นไปได้

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

— Arianule
แหล่งที่มา

คุณอาจจะต้องส่งคืนเท็จหรือ ae.preventDefault();

— geekchic

4

ในฐานะที่เป็นหมายเหตุด้านข้าง: e.keyCodeไม่ได้ข้ามเบราว์เซอร์อย่างสมบูรณ์ ใช้e.whichแทน

— Hashem Qolami

4

ในกรณีนี้คุณควรใช้keyupแทนหรือkeypress / กิจกรรมทริกเกอร์อย่างต่อเนื่องในขณะที่กดปุ่ม: jsbin.com/uzoxuk/1/editkeydownkeypresskeydown

— 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

ในกรณีที่ผู้คนต้องการจดจำการกดปุ่ม "Enter" จากที่ใดก็ได้คุณสามารถแทนที่ $ ('# txtSearchProdAssign') และทริกเกอร์เอกสาร $ (เอกสาร) .keypress .......

— dave4jr

ดูเหมือนคำถามจากมุมมองการเข้าถึง สิ่งนี้จะใช้ได้กับอุปกรณ์ทุกประเภทที่มีวิธีการ "เลือก" ที่แตกต่างกันหรือไม่?

— จอนนี่

27

ลองสิ่งนี้

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

หวังว่ามันจะช่วยคุณ

— Neeraj Dubey
แหล่งที่มา

4

คุณหมายถึงif((event.keyCode || event.which) == 13)อะไร ใช่มันเป็นเบราว์เซอร์ข้ามที่รองรับTabคีย์ใน FF

— Hashem Qolami

ตามที่API , ซ้ำซ้อนใช้เพียงevent.keyCode event.which

— konyak

12

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

ฉันเพิ่งพบการส่งแบบฟอร์มใน 'Enter'ซึ่งครอบคลุมปัญหาส่วนใหญ่อย่างครอบคลุม

— geekchic
แหล่งที่มา

8

คุณเกือบจะอยู่ที่นั่น นี่คือสิ่งที่คุณสามารถลองได้

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

ฉันได้ใช้ trigger()ในการดำเนินการคลิกและผูกไว้ในkeyupเหตุการณ์ insted ของkeydownเพราะclickประกอบด้วยเหตุการณ์สองเหตุการณ์ที่เกิดขึ้นจริงเช่นนั้นmousedown mouseupดังนั้นให้คล้ายกับสิ่งที่เป็นไปได้ด้วยkeydownและkeyupและ

นี่คือ การสาธิต

— Rohit416
แหล่งที่มา

4

นอกจากนี้ที่จะทำให้:

หากคุณกำลังเพิ่มอินพุตแบบไดนามิกตัวอย่างเช่นการใช้append()คุณต้องใช้on()ฟังก์ชันjQuery

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

UPDATE:

วิธีที่มีประสิทธิภาพมากขึ้นในการทำเช่นนี้คือการใช้คำสั่งสลับ คุณอาจพบว่ามันสะอาดกว่าด้วย

มาร์กอัป:

<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
แหล่งที่มา

1

IMO ที่ใช้คำสั่ง switch สำหรับเงื่อนไขเดียวคือ overkill

— nyuszika7h

มันมีประสิทธิภาพมากกว่าคำสั่ง if แม้ว่า

— Daniel Dewhurst

2

ฉันไม่เชื่อคุณ คุณสามารถอ้างอิงแหล่งที่มาได้หรือไม่?

— Rolf

3

คุณพยายามเลียนแบบการคลิกที่ปุ่มเมื่อกดปุ่ม Enter หรือไม่? ถ้าเป็นเช่นนั้นคุณอาจจำเป็นต้องใช้triggerไวยากรณ์

ลองเปลี่ยน

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

ถึง

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

หากนี่ไม่ใช่ปัญหาลองดูที่การจับภาพคีย์ครั้งที่สองโดยดูที่วิธีแก้ปัญหาในโพสต์นี้: jQuery Event Keypress: กดคีย์ใด

— ฌอน
แหล่งที่มา

จากapi.jquery.com/click - วิธีนี้เป็นทางลัดสำหรับ. on ("คลิก", ตัวจัดการ) ในสองรูปแบบแรกและ. trigger ("คลิก") ในรูปแบบที่สาม เพื่อที่จะทำสิ่งเดียวกัน

— แคปซูล

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

— Arron
แหล่งที่มา

0

Jquery: เหตุการณ์ Fire Button คลิกใช้ Enter กดปุ่มลองนี้ ::

tabindex = "0" onkeypress = "return EnterEvent (เหตุการณ์)"

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

— JIYAUL MUSTAPHA
แหล่งที่มา

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 นี้

ทดสอบกับ: Chrome 56.0 และ Firefox (Dev Edition) 54.0a2 ทั้งสองมี jQuery 2.2.x และ 3.x

— xDaizu
แหล่งที่มา

2

ดูเหมือนว่านี่จะไม่ได้กดปุ่ม 'return' เลย

— klokop

@klokop คุณเข้าใจผิดนี่เป็นการจับ 'return' หรือ 'enter' ฉันเพิ่งลองด้วยตัวเองด้วย jQuery 3 บน FF 63, Chrome 69, Safari 10.0.1 และ Opera 55 ทั้งบนลิงก์และในไซต์แยกต่างหากที่ฉันสร้างขึ้นเพื่อทดสอบด้วยตนเอง นั่นคือ +1 จากฉัน

— hyperum

คุณกำลังใช้ปุ่มป้อนจะเป็นปุ่มทริกเกอร์และ <a> แท็ก แต่ในช่วงขยายหรือเนื่องจาก OP มีช่องป้อนข้อมูลปกติไม่ใช่กรณีนี้

— Nickfmc