หลีกเลี่ยงการปิด Modal เมื่อกด Enter

ฉันได้ตั้งค่าโมดอล bootstrap โดยมีแบบฟอร์มอยู่ภายในฉันเพิ่งสังเกตว่าเมื่อฉันกดปุ่ม Enter โมดอลจะถูกปิด มีวิธีที่จะไม่ปิดเมื่อกด Enter หรือไม่?

ฉันพยายามเปิดใช้งานโมดอลด้วยแป้นพิมพ์: เท็จ แต่จะป้องกันการปิดด้วยแป้น ESC เท่านั้น

ฉันเพิ่งมีปัญหานี้เหมือนกัน
ปัญหาของฉันคือฉันมีปุ่มปิดในโมดอลของฉัน

<button class="close" data-dismiss="modal">&times;</button>

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

<a class="close" data-dismiss="modal">&times;</a>

หากไม่เห็นแหล่งที่มาของคุณฉันไม่สามารถยืนยันได้ว่าสาเหตุของคุณเหมือนกัน

เพียงเพิ่มแอตทริบิวต์type = "button"ให้กับองค์ประกอบปุ่มเบราว์เซอร์บางตัวจะแปลประเภทเป็นส่งโดยค่าเริ่มต้น

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes

ใช้กับปุ่มทั้งหมดที่คุณมีในโมดอล

<button type="button" class="close" data-dismiss="modal">×</button>

ฉันมีปัญหานี้แม้ว่าจะลบปุ่มทั้งหมดออกจาก Bootstrap Modal แล้วก็ตามดังนั้นจึงไม่มีวิธีแก้ปัญหาใดที่ช่วยฉันได้

ฉันพบว่าแบบฟอร์มที่มีช่องข้อความเดียวจะทำให้เบราว์เซอร์ทำการส่งแบบฟอร์ม (และส่งผลให้ถูกปิด) หากคุณกด Enter ในขณะที่แป้นพิมพ์โฟกัสอยู่บนช่องข้อความ สิ่งนี้ดูเหมือนจะเป็นปัญหาเกี่ยวกับเบราว์เซอร์ / ฟอร์มมากกว่าสิ่งใด ๆ กับ Bootstrap

วิธีแก้ปัญหาของฉันคือตั้งค่าแอตทริบิวต์ onsubmit ของฟอร์มเป็น onsubmit = "return false"

นี่อาจเป็นปัญหาหากคุณใช้งาน submit จริงๆ แต่ฉันใช้เฟรมเวิร์ก JS ที่สร้างคำขอ AJAX แทนการส่งเบราว์เซอร์ดังนั้นฉันชอบปิดการส่งทั้งหมด (นอกจากนี้ยังหมายความว่าฉันไม่จำเป็นต้องปรับแต่งทุกองค์ประกอบของฟอร์มด้วยตนเองที่อาจทำให้เกิดการส่ง)

ข้อมูลเพิ่มเติมที่นี่: กล่องโต้ตอบโมดอล Bootstrap พร้อมช่องป้อนข้อความเดียวจะปิดบนปุ่ม Enter เสมอ

คุณสามารถใส่ปุ่มเข้าสู่ระบบก่อนปุ่มยกเลิกและวิธีนี้จะช่วยแก้ปัญหาที่คุณพบได้เช่นกัน

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>

ฉันมีปัญหาเดียวกันและฉันแก้ไขด้วย

<form onsubmit="return false;">

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

<form role="form" method="post" action="submitform.php">
    <input type="text" id="name" name="name" >
    <input type="text" style="display: none;">
</form>

ตอนนี้ฉันมีประสบการณ์คล้าย ๆ กันและวิธีที่ฉันแก้ไขคือแทนที่จะใช้แท็กฉันเปลี่ยนแท็กเป็นแท็กที่มี type = "button" สิ่งนี้ดูเหมือนจะช่วยแก้ปัญหาในการกดปุ่ม "enter" และปิดโมดอล bootstrap

ฉันมีปัญหานี้เหมือนกันและฉันก็แก้ไขด้วยวิธีนี้ ฉันเพิ่ม onsubmit ในแบบฟอร์ม ฉันยังต้องการที่จะสามารถใช้ปุ่ม Enter เป็นคีย์บันทึกได้ดังนั้นฉันจึงเพิ่มจาวาสคริปต์ save_stuff () เพื่อ onsubmit กลับเท็จ ใช้เพื่อป้องกันการส่งแบบฟอร์ม

<form onsubmit="save_stuff(); return false;">
 ...
</form>

<script>
    function save_stuff(){
      //Saving stuff
    }
</script>