คลิกปุ่มทริกเกอร์

ฉันมีหน้าที่มีสองปุ่ม หนึ่งในนั้นคือ<button>องค์ประกอบและอื่น ๆ <input type="submit">ที่เป็น ปุ่มปรากฏขึ้นบนหน้าตามลำดับ หากฉันอยู่ในฟิลด์ข้อความที่ใดก็ได้ในแบบฟอร์มและกดเหตุการณ์<Enter>ขององค์ประกอบปุ่มclickจะเริ่มขึ้น ฉันคิดว่าเป็นเพราะองค์ประกอบปุ่มอยู่ก่อน

ฉันไม่พบสิ่งใดที่ดูเหมือนเป็นวิธีที่เชื่อถือได้ในการตั้งค่าปุ่มเริ่มต้นและฉันไม่ต้องการที่จะทำเช่นนี้ ในกรณีที่ไม่มีสิ่งใดดีกว่าฉันจับปุ่มกดได้ทุกที่ในแบบฟอร์มและหากเป็น<Enter>กุญแจที่ถูกกดฉันจะลบล้างมัน:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

เท่าที่ฉันสามารถบอกได้จนถึงตอนนี้ดูเหมือนว่ามันจะทำงานได้ แต่มันก็รู้สึกได้ถึงความแข็งแรงอย่างไม่น่าเชื่อ

ไม่มีใครรู้เทคนิคที่ซับซ้อนมากขึ้นสำหรับการทำเช่นนี้?

ในทำนองเดียวกันมีข้อผิดพลาดใด ๆ ในการแก้ไขปัญหานี้ที่ฉันเพิ่งไม่ทราบหรือไม่?

ขอบคุณ

การใช้

<button type="button">Whatever</button>

ควรทำเคล็ดลับ

submitเหตุผลเป็นเพราะปุ่มภายในรูปแบบที่มีประเภทของการตั้งค่าโดยปริยาย ตามที่ zzzzBoz พูดสเป็คบอกว่าสิ่งแรกbuttonหรือinputด้วยtype="submit"คือสิ่งที่ถูกทริกเกอร์ในสถานการณ์นี้ หากคุณตั้งค่าไว้เฉพาะtype="button"เบราว์เซอร์จะถูกลบออกจากการพิจารณา

สิ่งสำคัญคือต้องอ่านข้อกำหนด HTML เพื่อทำความเข้าใจพฤติกรรมที่คาดหวังอย่างแท้จริง:

ข้อมูลจำเพาะ HTML5 อย่างชัดเจนสิ่งที่เกิดขึ้นในimplicit submissions :

ปุ่มเริ่มต้นขององค์ประกอบฟอร์มคือปุ่มส่งแรกในลำดับทรีที่เจ้าของฟอร์มเป็นองค์ประกอบฟอร์มนั้น

หากตัวแทนผู้ใช้รองรับการอนุญาตให้ผู้ใช้ส่งแบบฟอร์มโดยปริยาย (ตัวอย่างเช่นในบางแพลตฟอร์มที่กดปุ่ม "Enter" ในขณะที่ฟิลด์ข้อความเน้นการส่งแบบฟอร์มโดยปริยาย) จากนั้นให้ทำแบบฟอร์มที่ปุ่มเริ่มต้นมีการเปิดใช้งานที่กำหนด ลักษณะการทำงานต้องทำให้ตัวแทนผู้ใช้เรียกใช้ขั้นตอนการเปิดใช้งานการคลิกสังเคราะห์บนปุ่มเริ่มต้นนั้น

สิ่งนี้ไม่ได้ระบุไว้อย่างชัดเจนในข้อกำหนดของ HTML4 แต่เบราว์เซอร์ได้ดำเนินการตามที่อธิบายไว้ในข้อกำหนดของ HTML5 แล้ว

แก้ไขเพื่อเพิ่ม:

คำตอบที่ง่ายที่สุดที่ฉันคิดคือใส่ปุ่มส่งของคุณเป็น[type="submit"]ไอเท็มแรกในแบบฟอร์มเพิ่มการเติมช่องว่างด้านล่างของแบบฟอร์มด้วย css และวางตำแหน่งปุ่มส่งที่ด้านล่างที่คุณต้องการ

ฉันไม่คิดว่าคุณต้องการจาวาสคริปต์หรือ CSS เพื่อแก้ไขปัญหานี้

ตามข้อมูลจำเพาะ html 5 สำหรับปุ่มปุ่มที่ไม่มีแอททริบิวต์จะถือว่าเป็นปุ่มที่ตั้งค่าเป็น "ส่ง" เช่นปุ่มสำหรับส่งฟอร์มที่มี การตั้งค่าประเภทของปุ่มเป็น "ปุ่ม" ควรป้องกันพฤติกรรมที่คุณเห็น

ฉันไม่แน่ใจเกี่ยวกับการสนับสนุนเบราว์เซอร์สำหรับสิ่งนี้ แต่มีการระบุพฤติกรรมเดียวกันในhtml 4.01 spec สำหรับปุ่มดังนั้นฉันคาดหวังว่ามันจะค่อนข้างดี

โดยการกด 'Enter' บนมุ่งเน้นไป<input type="text">ที่คุณเรียก 'คลิก' เหตุการณ์ในองค์ประกอบที่ตำแหน่งแรกหรือ<button> <input type="submit">หากคุณกด 'Enter' ใน<textarea>คุณจะสร้างบรรทัดข้อความใหม่

ดูตัวอย่างที่นี่

ป้องกันรหัสของคุณที่จะทำให้บรรทัดข้อความใหม่เพื่อให้คุณจะต้องจับกดปุ่มเฉพาะสำหรับ<textarea><input type="text">

แต่ทำไมคุณต้องกดEnterในช่องข้อความ? หากคุณต้องการส่งแบบฟอร์มโดยกด 'Enter' แต่สิ่งที่<button>ต้องคงอยู่ก่อนในเลย์เอาต์เพียงแค่เล่นกับมาร์กอัป: ใส่<input type="submit">รหัสไว้ข้างหน้า<button>และใช้ CSS เพื่อบันทึกเค้าโครงที่คุณต้องการ

การจับ 'Enter' และมาร์กอัปการบันทึก:

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});

ไม่ว่าคุณจะใช้<button>องค์ประกอบตามค่าเริ่มต้นจะพิจารณาปุ่มtype="submit"นั้นดังนั้นหากคุณกำหนดปุ่มtype="button"จากนั้นจะไม่ถือว่า<button>เป็นปุ่มส่ง

การกด Enter ในช่องข้อความของแบบฟอร์มจะส่งแบบฟอร์มโดยค่าเริ่มต้น หากคุณไม่ต้องการให้มันทำงานอย่างนั้นคุณจะต้องกดปุ่ม Enter และกินแบบที่คุณทำ ไม่มีทางรอบนี้ มันจะทำงานในลักษณะนี้แม้ว่าจะไม่มีปุ่มปรากฏอยู่ในแบบฟอร์ม

คุณสามารถใช้จาวาสคริปต์เพื่อบล็อกการส่งแบบฟอร์มได้จนกว่าจะถึงเวลาที่เหมาะสม ตัวอย่างที่หยาบมาก:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

การกด Enter จะยังคงทริกเกอร์แบบฟอร์มเพื่อส่ง แต่จาวาสคริปต์จะป้องกันไม่ให้ส่งจริงจนกว่าคุณจะกดปุ่ม

ตัวอย่าง Dom

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

จาวาสคริปต์

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

หากคุณไม่ได้ใช้ preventDefault () ปุ่มอื่น ๆ จะเริ่มทำงาน

ฉันต้องการทำสิ่งต่อไปนี้: ในตัวจัดการสำหรับเหตุการณ์ onclick ของปุ่ม (ไม่ส่ง) ให้ตรวจสอบ keycode ของวัตถุเหตุการณ์ หากเป็น "ป้อน" ฉันจะส่งคืนค่าเท็จ

สถานการณ์ของฉันมีสองSubmitปุ่มภายในองค์ประกอบรูปแบบ: และUpdate ปุ่มลบภาพและปุ่มปรับปรุงฐานข้อมูลที่มีเขตข้อมูลข้อความในแบบฟอร์มDeleteDeleteUpdate

เนื่องจากDeleteปุ่มเป็นรูปแบบแรกมันเป็นปุ่มเริ่มต้นบนEnterปุ่ม ไม่ใช่สิ่งที่ฉันต้องการ ผู้ใช้คาดว่าจะสามารถกดได้Enterหลังจากเปลี่ยนฟิลด์ข้อความ

ฉันพบคำตอบในการตั้งค่าปุ่มเริ่มต้นที่นี่ :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

โดยไม่ใช้สคริปต์ใด ๆ ฉันกำหนดรูปแบบที่แต่ละปุ่มเป็นของการใช้<button> form="bla"คุณสมบัติ ฉันตั้งค่าDeleteปุ่มเป็นแบบฟอร์มที่ไม่มีอยู่และตั้งค่าUpdateปุ่มที่ฉันต้องการเรียกใช้บนEnterคีย์เป็นแบบฟอร์มที่ผู้ใช้จะเข้ามาเมื่อป้อนข้อความ

นี่เป็นสิ่งเดียวที่ได้ผลสำหรับฉันจนถึงตอนนี้

คุณสามารถทำอะไรเช่นนี้

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

ตัวอย่างเช่น.

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

ฉันเพิ่มปุ่มประเภท "ส่ง" เป็นองค์ประกอบแรกของแบบฟอร์มและทำให้มองไม่เห็น ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;) ทำงานเหมือนรีเฟรชไซต์คือฉันไม่ทำอะไรเลยเมื่อกดปุ่มยกเว้นว่ามีการโหลดไซต์อีกครั้ง สำหรับฉันทำงานได้ดี ...