Tại sao MẪU với một văn bản INPUT gửi khi nhập trong khi một văn bản có hai INPUT văn bản thì không?

Question

Tôi vừa phát hiện ra rằng MẪU chỉ chứa một INPUT (không ẩn) sẽ tự động gửi khi nhấn Enter.

Nhưng một biểu mẫu có chứa ít nhất hai INPUTS (không ẩn) sẽ KHÔNG gửi khi nhấn enter.

(Không ai trong số các kịch bản có một nút gửi// input [type = nộp] bên trong)

Hãy xem jsfidle này. Có một lời giải thích/tiêu chuẩn cho hành vi này?

<form id="form1" method="POST"> 
    <p>Does submit:</p> 
    <input type="text" placeholder="focus and press enter"/> 
</form> 

<form id="form2" method="POST"> 
    <p>Does <strong>not</strong> submit:</p> 
    <input type="text" placeholder="does not submit"/> 
    <input type="text" placeholder=""/> 
</form> 

Answer 1

Hành vi này đã được giới thiệu trong đặc tả HTML 2.0. Xem bài viết sau để biết thêm chi tiết:

Form submission and the ENTER key?

Khi chỉ có một single-line trường nhập văn bản trong một hình thức, các đại lý sử dụng nên chấp nhận Nhập trong lĩnh vực đó như là một yêu cầu nộp hình thức

Nguồn: W3C Specs

Answer 2

Đó là triển khai cụ thể cho trình duyệt. . . một số phiên bản của IE thực sự không làm điều đó theo mặc định, nhưng Firefox và một số trình duyệt khác thấy phù hợp để đưa ra giả định rằng, đối với biểu mẫu có một hộp văn bản, người dùng (hoặc nhà thiết kế trang) sẽ luôn muốn gửi biểu mẫu trên Enter từ trường đó.

Thực tế đã có nhiều lần tôi phải viết mã đó. . . đó là một trong những quyết định thiết kế trình duyệt có vấn đề hơn trong quan điểm của tôi.

Edit:

Có câu trả lời sắc thái hơn cho câu hỏi của bạn, nếu bạn quan tâm. . . dường như các trình duyệt khác nhau (và các phiên bản khác nhau của chúng) có các hành vi khác nhau xung quanh tình huống cụ thể này, bao gồm cả việc có gửi hay không sự kiện click, v.v. Tôi có thể cung cấp liên kết đến nhiều thông tin hơn nếu bạn muốn đọc thêm .

Nhưng câu trả lời ngắn gọn là, đó thực sự là cố ý, nếu không được hỗ trợ nhất quán trên các trình duyệt.

Answer 3

Thêm dòng sau nên làm việc trong IE.

$(document).ready(function() { 
 
    $('input,select').keypress(function(event) { return event.keyCode != 13; }); 
 
    });