Dừng phím Enter/Return để gửi biểu mẫu

Question

Tôi có một bảng trong một biểu mẫu. Bảng này chứa một số trường biểu mẫu, nhưng có các trường biểu mẫu nằm ngoài bảng (nhưng vẫn nằm trong biểu mẫu).

Tôi biết rằng Enter và Return thường được sử dụng để gửi biểu mẫu qua bàn phím nhưng tôi muốn dừng hành vi này cho các trường trong bảng. Ví dụ, nếu tôi tập trung một trường trong bảng và nhấn Enter/Return, không có gì xảy ra. Nếu tôi tập trung một lĩnh vực bên ngoài của bảng (nhưng vẫn còn trong các hình thức) sau đó cho nó để gửi như bình thường.

Tôi có một plugin jQuery nhắm mục tiêu đến bảng này. Đơn giản, đây là những gì tôi đã thử cách này:

base.on('keydown', function(e) { 
    if (e.keyCode == 13) { 
     e.stopPropagation(); 
     return false; 
    } 
}); 

Trường hợp base là đối tượng jQuery của bảng. Đây là phương thức của tôi trong phương thức init của plugin của tôi. Tuy nhiên, nhấn Enter vẫn gửi biểu mẫu.

Tôi sẽ làm gì sai?

EDIT: Một số đơn giản hóa HTML:

<form method="" action=""> 
    <input type="text" /><!--this should still submit on Enter--> 
    <table> 
    <tbody> 
     <tr> 
     <td> 
      <input type="text" /><!--this should NOT submit on Enter--> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</form> 

Answer 1

base.keypress(function(e) { 
    var code = e.keyCode || e.which; 
    if(code == 13) 
     return false; 
}); 

hoặc chỉ đầu vào:

$(':input', base).keypress(function(e) { 
    var code = e.keyCode || e.which; 
    if(code == 13) 
     return false; 
}); 

Answer 2

e.preventDefault() hơn e.stopPropagation(). stopPropagation chỉ dừng nó sủi bọt lên đến các nút DOM cao hơn, nó không ngăn chặn các hành động mặc định.

Answer 3

tôi sẽ đoán rằng một yếu tố hình thức sẽ cháy sự kiện gửi, nó không bong bóng lên qua bàn và trên mẫu, thử instread này:

$('input, select, textarea', base).on('keydown', function(e) { 
    if (e.keyCode == 13) { 
     return false; 
    } 
}); 

Lưu ý chúng tôi cũng cung cấp ngữ cảnh cho bộ chọn, vì vậy, keyDown này sẽ chỉ xuất hiện trên các phần tử (sửa đổi theo yêu cầu) trong bảng của bạn.

Như Gordan nói trong bình luận khác, trả về false hiện cả hai .preventDefault() và .stopPropagation()

Answer 4

tôi thấy Q này/A cố gắng sắp xếp ra một tình huống tương tự nơi tôi có nhiều hình thức và nhập sẽ không làm những gì tôi muốn. Trong trường hợp cụ thể của tôi, tôi sẽ tự động thêm một mới <div id="D1"> D1, D2, D3, v.v ... và mỗi div mới có một biểu mẫu sẽ tải lại div đó từ cùng một mã php đã tạo ra nó, chỉ với POST.

Không liên quan vấn đề đầu tiên là tôi có thể không tự động tạo một hàm mới với mỗi div, vì vậy tôi đã thông qua D1, vv, mô tả như một cuộc tranh cãi với chức năng Javascript:

<script type="text/javascript"> 
function formSubmit (divid) { 
    // post data 
    event.preventDefault(); 
    $.post("make-my-form-div.php", 
      $("#form"+divid).serialize(), 
      function(data){ 
       $("#"+divid).html(data); 
      }); 
    return false; 
} 
</script> 

Bạn sẽ thấy những điều kiện tiên quyết event.preventDefault(); và return false; hoạt động cho các câu trả lời trong chuỗi này. Nó không hiệu quả với tôi. Nếu tôi nhấp vào Gửi trong bất kỳ biểu mẫu nào, thì một div đó sẽ tải lại với dữ liệu chính xác. Việc nhập vào sẽ gây ra hành động mặc định và tải lại toàn bộ trang, chỉ để lại cho tôi 1 div.

This Answer worked: Tôi cần một ID và NAME duy nhất cho các biểu mẫu khác nhau. Ban đầu, chúng là <INPUT TYPE="button" VALUE="Submit" onClick="formSubmit('<?php echo $divid ?>');"> nhưng một khi tôi đã thêm ID và NAMES duy nhất, chẳng hạn như "formD1", v.v, tất cả đều bắt đầu hoạt động chính xác.

Answer 5

Điều này phù hợp với tôi.

$("input[type='text']").on('keypress', function(e) { return e.keyCode != 13; }); 

Answer 6

Chỉ cần đặt mã bên dưới vào tệp mẫu của bạn hoặc trong tiêu đề trang.

<script type="text/javascript"> 

function stopRKey(evt) { 
    var evt = (evt) ? evt : ((event) ? event : null); 
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
    if ((evt.keyCode == 13) && (node.type=="text")) {return false;} 
} 

document.onkeypress = stopRKey; 

</script>