Ngăn chặn gửi biểu mẫu khi nhấn phím Enter cho Văn bản

Tôi biết câu hỏi này đã được hỏi trước nhưng tôi không thể tìm thấy câu trả lời thỏa đáng cho tình huống của mình. Vì vậy, tôi hỏi lại.Ngăn chặn gửi biểu mẫu khi nhấn phím Enter cho Văn bản

Tôi có một biểu mẫu đơn giản với 2 hộp văn bản và nút gửi. Sau khi người dùng nhập văn bản vào hộp văn bản mà họ không thể gửi thông qua phím Enter, chỉ nút gửi phải cho phép họ gửi. Tôi nghĩ bẫy nhập bấm phím và trả về false từ xử lý sự kiện onChange sẽ làm các trick nhưng dường như không, điều này vẫn gây ra một hình thức trình ...

function doNotSubmit(element) { 

     alert("I told you not to, why did you do it?"); 
     return false; 

} 
</script> 


<form id="myForm" action="MyBackEnd.aspx" method="post"> 

<table> 
    <tbody> 
    <tr> 
     <td> 
      Joe: <input id="JoeText" type="text" onChange="doNotSubmit(this)"> 
     </td> 
     <td> 
      Schmoe: <input id="SchmoeText" type="text" onChange="doNotSubmit(this)" > 
     </td> 
    </tr> 
    </tbody> 
</table> 

<input type=submit>

Tôi đã thử nghiệm trên cả hai Chrome và FF (phiên bản mới nhất).

Bạn có thể vui lòng cho tôi biết cách ngăn gửi biểu mẫu không?

Cảm ơn.

Nguồn

2015-05-21 AbuMariam

thể trùng lặp của [Ngăn người dùng điền vào mẫu bằng cách nhấn Enter] (http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter) – dan08

Đầu tiên , Tôi nghĩ bạn muốn onkeypress hoặc onkeydown thay vì onchange. Thứ hai, 'e' đến từ đâu trong hàm' doNotSubmit' của bạn? – ray

để heo con trở lại @ anwser Dasein bạn muốn ngăn chặn mặc định hành vi thay vì dừng tuyên truyền (nghĩa là trả về false):

document.getElementById("myForm").onkeypress = function(e) { 
 
    var key = e.charCode || e.keyCode || 0;  
 
    if (key == 13) { 
 
    alert("I told you not to, why did you do it?"); 
 
    e.preventDefault(); 
 
    } 
 
}

<form id="myForm" action="MyBackEnd.aspx" method="post"> 
 

 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
      Joe: <input id="JoeText" type="text"> 
 
     </td> 
 
     <td> 
 
      Schmoe: <input id="SchmoeText" type="text" > 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<input type=submit>

Nguồn

2015-05-21 22:38:55 devkaoru

@ Dasein và devkaoru, tôi nghĩ đề xuất của bạn sẽ hoạt động nhưng ngay bây giờ khi tôi chèn javascript như vậy, nó làm cho tải trang của tôi đưa ra lỗi "document.getElementById (...) is null". Bất kỳ ý tưởng tại sao điều này xảy ra, tôi chắc chắn tên của biểu mẫu "myForm" là chính xác? – AbuMariam

bạn có khả năng tải tập lệnh trước khi DOM của bạn sẵn sàng. sử dụng sự kiện sẵn sàng để ngăn điều này: http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the – devkaoru

Đúng, là nó. – AbuMariam

Tôi nghĩ rằng điều này sẽ làm:

document.getElementById("myInput").onkeypress = function(e) { 
    var key = e.charCode || e.keyCode || 0;  
    if (key == 13) { 
     alert("I told you not to, why did you do it?"); 
     return false; 
    } 
}

Nguồn

2015-05-21 21:32:28 user2755140

Không, xin lỗi nó không hoạt động. Biểu mẫu vẫn gửi. Nhưng kỳ lạ là tôi cũng không thấy cảnh báo. – AbuMariam

Và có, tôi đã thay đổi tham số getElementbyId thành "JoeText". – AbuMariam

Thật kỳ lạ, nó hoạt động cho tôi như bạn có thể kiểm tra ở đây: http://jsfiddle.net/a70wuoo9/1/ – user2755140

Nếu bạn bao gồm một nút gửi thì hành vi hình thức mặc định là nộp vào enter. Để ngăn chặn việc gửi ngẫu nhiên, bạn có thể thêm hộp thoại xác nhận vào sự kiện onsubmit (biểu mẫu A). Một cách khác là thay thế nút gửi bằng nút của riêng bạn (biểu mẫu B). Tuy nhiên, người dùng sau đó sẽ cần phải nhấp vào nút để gửi.

đoạn Run để kiểm tra (Tested trong Chrome, Firefox và IE 5-11)

<html> 
 
<body> 
 
Form A: This form submits on enter key  
 
<form action="handler.aspx" method="post" onsubmit="return confirm('submit form?')"> 
 
    <input type="text" > 
 
    <input type="text" > 
 
    <input type="submit"> 
 
</form> 
 
<p> 
 
Form B: This form submits only on button click<br> 
 
<form action="hanlder.aspx" method="post" > 
 
    <input type="text" > 
 
    <input type="text" > 
 
    <input type="button" value="submit" onclick="if (confirm('Submit form?')) document.forms[1].submit()"> 
 
</form> 
 
    
 
</body> 
 
</html>

Nguồn

2015-05-21 22:13:42 Roberto

Ngăn chặn gửi biểu mẫu khi nhấn phím Enter cho Văn bản

Trả lời

Các vấn đề liên quan