ตรวจจับปุ่ม Enter ในช่องป้อนข้อความ


299

ฉันพยายามที่จะทำฟังก์ชั่นถ้ากดถูกป้อนในขณะที่การป้อนข้อมูลเฉพาะ

ฉันทำอะไรผิด

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

มีวิธีที่ดีกว่าในการทำสิ่งนี้ซึ่งจะบอกว่าถ้ากดบน.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 () และจำเป็น === มากกว่า == ดูคำตอบของฉันสำหรับรายละเอียดเพิ่มเติม
เวสบอส

6
@jQuerybeast มันไม่จำเป็นและevent.keyCodeเป็นNumberดังนั้น JavaScript จะใช้ขั้นตอนเดียวกันกับหรือ== ===
alex

7
e.which ได้รับการประกาศให้เป็นเบราว์เซอร์ข้ามที่มีประโยชน์มากขึ้น
mohammad eslahi sani

2
คุณสมบัติwhich, code, charCodeและkeyCodeจะเลิกdeveloper.mozilla.org/en-US/docs/Web/API/KeyboardEventโปรดเพิ่มข้อมูลที่แท้จริงคำตอบของคุณ
Sasay

120

event.key === "Enter"

อื่น ๆ 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
    }
});

เอกสาร Mozilla

เบราว์เซอร์ที่รองรับ


6
รุ่งโรจน์สำหรับรุ่นจาวาสคริปต์ธรรมดาไม่แน่ใจว่าทำไมคนอื่น ๆ ทั้งหมดอยู่ใน jquery
Captain Fantastic

7
เนื่องจาก OP ใส่โค้ดตัวอย่างของเขาใน jQuery และ (รวมถึง JavaScript) 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!')
    }
  });

หากต้องการทราบว่าคุณต้องการคีย์โค้ดใดให้ใช้เว็บไซต์http://keycode.info


ขอบคุณ. ฉันได้เรียนรู้สิ่งใหม่ โดยวิธีการที่ฉันใช้. is () จำนวนมากครั้งดังนั้นจึงไม่ใช่เหตุผลที่จะไม่ทำงาน นอกจากนี้ == อีกครั้งฉันใช้สอง == สำหรับสถานการณ์อื่น ๆ
jQuerybeast

np, คุณควรใช้ ===
เวสบอส

12

ลองใช้วิธีนี้เพื่อตรวจหาEnterปุ่มกดในกล่องข้อความ

$(function(){

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

});

6

มันอาจจะสายเกินไปที่จะตอบคำถามนี้ แต่รหัสต่อไปนี้จะป้องกันการป้อนรหัส เพียงคัดลอกและวางควรทำงาน

        <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 ไม่เช่นนั้นจะดีกว่า
Alex

3

วิธีแก้ปัญหาที่เหมาะกับฉันมีดังต่อไปนี้

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // 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.