เหตุการณ์การคลิกปุ่มจะเริ่มทำงานเมื่อกดปุ่ม Enter ในอินพุตอื่น (ไม่มีรูปแบบ)

111

ตรรกะนี้เริ่มทำงานเมื่อกด "Enter" ในอินพุต "จำนวนเงิน" และฉันไม่เชื่อว่าควร (ไม่ได้อยู่ใน Chrome) ฉันจะป้องกันสิ่งนี้ได้อย่างไรและหากไม่ได้ป้องกันใน IE ให้จัดการเพื่อไม่ให้ตรรกะในเหตุการณ์คลิกเริ่มทำงาน

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

สคริปต์

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});

Jquery: 1.7.2
IE 9
(ทำงานใน Chrome)

jquery internet-explorer

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

1

ตรงกันข้ามกับคำถามนี้เพิ่งเกิดขึ้นกับฉันใน Chrome และ Firefox การแก้ไขเดียวกันแม้ว่า (ประเภทปุ่ม)

— Tim Grant

324

ฉันมีปัญหาเดียวกันและแก้ไขได้โดยการเพิ่มtype="button"แอตทริบิวต์ให้กับ<button>องค์ประกอบโดยที่ IE คิดว่าปุ่มนี้เป็นปุ่มธรรมดาแทนที่จะเป็นปุ่มส่ง (ซึ่งเป็นลักษณะการทำงานเริ่มต้นของ<button>องค์ประกอบ)

— ปัลลาติ
แหล่งที่มา

6

ฉันมีปัญหาเดียวกันกับ Firefox แอตทริบิวต์ type = "button" ยังแก้ไขให้ฉันด้วย

— Alexander Fradiani

109

ขอให้มีอายุยืนยาวเป็นพันปี

— TheBrain

4

แก้ไขได้ดีเยี่ยม ฉันคิดว่าเบราว์เซอร์จะส่งอัตโนมัติเมื่อ "Enter" เมื่ออยู่ในแท็ก <form> แต่ฉันเห็นว่าฉันคิดผิด

— Clayton Bell

2

วันที่ตะโกนใส่ IE9 (ระหว่างที่ฉันตะโกนใส่อย่างอื่นฉันต้องตะโกนใส่) และนี่คือวิธีแก้ปัญหา ร้อนแรง.

— phatskat

5

ถูกกัดโดยปัญหานี้สองครั้งในเวลาเพียงสองสามสัปดาห์ แค่รู้สึกแปลก ๆ ที่ต้องเรียกออกมาtype="button"เป็น<button>องค์ประกอบ ฮ่าฮ่า ... :) หวังว่าคราวหน้าคงจำได้นะ

— แซม

33

ฉันพบปัญหานี้ในวันนี้ IE จะถือว่าหากคุณกดปุ่ม Enter ในช่องข้อความใด ๆ คุณต้องการส่งแบบฟอร์มแม้ว่าฟิลด์นั้นจะไม่ได้เป็นส่วนหนึ่งของแบบฟอร์มก็ตามและแม้ว่าปุ่มจะไม่ใช่ประเภท "ส่ง" ก็ตาม

คุณต้องแทนที่พฤติกรรมเริ่มต้นของ IE ด้วย PreventDefault () ในตัวเลือก jQuery ของคุณให้ใส่ div ที่มีกล่องข้อความที่คุณต้องการละเว้นคีย์ Enter ในกรณีของคุณคือ div "page" แทนที่จะเลือกทั้ง div คุณสามารถระบุกล่องข้อความที่คุณต้องการละเว้นโดยเฉพาะได้

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});

— คริสเตียนคลินตัน
แหล่งที่มา

ทางออกที่ดีที่สุดเมื่อคุณต้องการใช้ส่วนประกอบที่กำหนดเองและคุณไม่สามารถเพิ่ม type = "button" ได้

— FireZenk

ขอบคุณคลินตันสิ่งนี้ใช้ได้ผลสำหรับฉัน ครั้งแรกที่ฉันพยายามที่จะทำให้ทุกปุ่มประเภท "ปุ่ม" ยังคงไม่ทำงาน จากนั้นฉันต้องระงับเหตุการณ์ที่เกิดขึ้นเมื่อกดปุ่ม Enter

— Rupesh Kumar Tiwari

ขอบคุณมาก. ฉันโกรธคอมพิวเตอร์ในช่วง 2 ชั่วโมงที่ผ่านมา

— Edwin

4

ฉันมีปัญหากับ ASP.NET WebForms นี้:

<asp:Button />

สิ่งนี้ไม่สามารถแก้ไขได้ด้วยการเพิ่ม type = "button" เนื่องจาก ASP.NET แทนที่ด้วย type = "submit" (คุณจะเห็นลักษณะการทำงานนี้ในเบราว์เซอร์หากคุณตรวจสอบองค์ประกอบ)

วิธีที่ถูกต้องในการทำใน asp.net คือการเพิ่ม

<asp:Button UseSubmitBehavior="false" />

ไปที่ปุ่ม ASP จะเพิ่มแอตทริบิวต์ type = "button" โดยอัตโนมัติ

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

2

IE คิดว่าbuttonองค์ประกอบใด ๆเป็นปุ่มส่ง (ไม่ว่าคุณจะมีformหรือไม่ก็ตาม) นอกจากนี้ยังจัดการการกดEnterปุ่มในองค์ประกอบฟอร์มเป็นการส่งแบบฟอร์มโดยปริยาย ดังนั้นเนื่องจากคิดว่าคุณกำลังพยายามส่งแบบฟอร์มจึงคิดว่ามันจะช่วยคุณได้และเริ่มต้นclickเหตุการณ์ (สิ่งที่คิดว่าเป็น) ปุ่มส่ง

คุณสามารถแนบkeyupเหตุการณ์เข้ากับinputหรือbuttonและตรวจสอบEnterคีย์ ( e.which === 13) และreturn false;

— ลิงนอกรีต
แหล่งที่มา

1

โซลูชันที่ใช้ jQuery ที่ทำสิ่งนี้สำหรับทุกปุ่มคือ:

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

อย่างไรก็ตามเหตุการณ์การคลิกจะยังคงขึ้นอยู่กับองค์ประกอบหลักด้วยเหตุผลบางประการ ...

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

0

สำหรับ Chrome คุณสามารถเพิ่ม<button type="submit" style="display:none"/> เนื่องจากในประเภทปุ่มเริ่มต้นของ Chrome คือ "ส่ง"

สำหรับ IE ฉันได้ลองใช้type="button"(ในประเภทปุ่มเริ่มต้นของ IE คือ "ปุ่ม") แต่ทำงานได้ไม่ดี

นี่คือทางออก ใน HTML เพิ่ม(keypress)=xxx($event)ในแบบฟอร์มของคุณ ใน TS

xxx(event) {
 if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}

ข้างต้นจะใช้ได้ในทุกสถานการณ์เช่นข้ามเบราว์เซอร์การคลิกปกติและขั้นตอนของแท็บ

— ทมิฬ
แหล่งที่มา