Nhập nút trình kích hoạt, nhấp vào

Question

Tôi có một trang có hai nút. Một là một phần tử <button> và phần còn lại là <input type="submit">. Các nút xuất hiện trên trang theo thứ tự đó. Nếu tôi đang ở trong trường văn bản ở bất kỳ đâu trong biểu mẫu và nhấn <Enter>, sự kiện click của thành phần nút được kích hoạt. Tôi cho rằng đó là vì phần tử nút nằm đầu tiên.

Tôi không thể tìm thấy bất kỳ thứ gì trông giống như một cách đáng tin cậy để đặt nút mặc định, cũng như tôi không nhất thiết muốn vào thời điểm này. Trong sự vắng mặt của bất cứ điều gì tốt hơn, tôi đã bị bắt một phím nhấn bất cứ nơi nào trên hình thức, và nếu nó là chìa khóa <Enter> đã được ép, tôi chỉ phủ nhận nó:

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

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

Theo như tôi có thể nói như vậy đến nay, nó có vẻ đang hoạt động, nhưng nó cảm thấy vô cùng ham-fisted. Có ai biết về một kỹ thuật tinh vi hơn để làm điều này? Tương tự, có bất kỳ cạm bẫy nào đối với giải pháp này mà tôi không biết?

Cảm ơn.

Answer 1

Nhấn enter trong trường văn bản của biểu mẫu sẽ, theo mặc định, gửi biểu mẫu. Nếu bạn không muốn nó hoạt động theo cách đó, bạn phải nắm bắt việc nhấn phím enter và tiêu thụ nó như bạn đã làm. Không có cách nào xung quanh chuyện này. Nó sẽ hoạt động theo cách này ngay cả khi không có nút nào có trong biểu mẫu.

Answer 2

Tôi sẽ làm như sau: Trong trình xử lý sự kiện onclick của nút (không gửi), hãy kiểm tra mã khóa của đối tượng sự kiện. Nếu nó là "nhập" tôi sẽ trả về false.

Answer 3

Bạn có thể sử dụng javascript để chặn gửi biểu mẫu cho đến thời điểm thích hợp. Ví dụ rất thô sơ:

<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> 

Nhấn enter sẽ vẫn kích hoạt biểu mẫu để gửi, nhưng javascript sẽ giữ cho nó không thực sự gửi, cho đến khi bạn thực sự nhấn nút.

Answer 4

Điều quan trọng là để đọc các thông số kỹ thuật HTML để thực sự hiểu những gì hành vi là để được mong đợi:

Các HTML5 spec explicitly states what happens in implicit submissions:

nút mặc định Một yếu tố hình thức là nút đầu tiên nộp để cây có hình thức chủ sở hữu là yếu tố biểu mẫu đó.

Nếu tác nhân người dùng hỗ trợ cho phép người dùng gửi biểu mẫu ngầm (ví dụ, trên một số nền tảng nhấn phím "enter" trong khi trường văn bản được tập trung ngầm gửi biểu mẫu), thì làm như vậy cho biểu mẫu có nút mặc định có hành vi kích hoạt được xác định phải làm cho tác nhân người dùng chạy các bước kích hoạt nhấp chuột tổng hợp trên nút mặc định đó.

Điều này không được nêu rõ trong thông số HTML4, tuy nhiên các trình duyệt đã triển khai những gì được mô tả trong thông số HTML5 (đó là lý do tại sao nó được bao gồm một cách rõ ràng).

Chỉnh sửa để thêm:

Câu trả lời đơn giản nhất tôi có thể nghĩ là để đưa nút gửi của bạn như là [type="submit"] mục đầu tiên trong hình thức, thêm đệm để dưới cùng của mẫu với css, và hoàn toàn vị trí nộp ở phía dưới nơi bạn muốn.

Answer 5

Bằng cách nhấn 'Enter' trên tiêu điểm <input type="text"> bạn kích hoạt sự kiện 'nhấp chuột' trên thành phần vị trí đầu tiên: <button> hoặc <input type="submit">. Nếu bạn nhấn 'Enter' trong <textarea>, bạn chỉ cần tạo một dòng văn bản mới.

Xem ví dụ here.

Mã của bạn ngăn không cho tạo dòng văn bản mới trong <textarea>, vì vậy, bạn chỉ cần bấm phím bấm chính cho <input type="text">.

Nhưng tại sao bạn cần phải nhấn Enter trong trường văn bản? Nếu bạn muốn gửi biểu mẫu bằng cách nhấn 'Enter', nhưng <button> phải ở vị trí đầu tiên trong bố cục, chỉ cần chơi với đánh dấu: đặt mã <input type="submit"> trước số <button> và sử dụng CSS để lưu bố cục bạn cần.

Bắt 'Enter' và đánh dấu tiết kiệm:

$('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`*/ 
}); 

Answer 6

Tôi không nghĩ rằng bạn cần javascript hoặc CSS để sửa lỗi này.

Theo html 5 spec for buttons nút không có thuộc tính loại được xử lý giống như nút có loại được đặt thành "gửi", tức là nút để gửi biểu mẫu có chứa của nó. Đặt loại nút thành "nút" nên ngăn chặn hành vi bạn đang thấy.

Tôi không chắc chắn về hỗ trợ của trình duyệt cho điều này, nhưng hành vi tương tự đã được chỉ định trong html 4.01 spec for buttons vì vậy tôi hy vọng nó khá tốt.

Answer 7

Sử dụng

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

nên làm các trick.

Lý do là do một nút bên trong biểu mẫu có loại của nó được đặt ngầm thành submit. Như zzzzBoz nói, Spec nói rằng button hoặc input đầu tiên với type="submit" là những gì được kích hoạt trong tình huống này. Nếu bạn đặt cụ thể type="button", thì trình duyệt sẽ bị xóa khỏi trình duyệt.

Answer 8

Tôi đã thêm một nút loại "gửi" làm phần tử đầu tiên của biểu mẫu và biến nó thành ẩn (width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Hoạt động như làm mới trang web, tức là tôi không làm gì khi nhấn nút ngoại trừ việc trang web được tải lại. Đối với tôi hoạt động tốt ...