HTML5: Cách gửi biểu mẫu, sau khi nhấn ENTER tại bất kỳ đầu vào văn bản nào?

Tiêu đề nói cho chính nó ... Tôi có một vài hình thức, một trong số họ chỉ là một hình thức đầu vào văn bản duy nhất và một trong những khác được sáng tác bởi hai đầu vào văn bản. Tôi không muốn bất kỳ nút nộp tại bất kỳ trong số họ, tôi muốn mỗi mẫu này để gửi bất cứ khi nào người dùng nhấn nút ENTER tại bất kỳ văn bản nhập vào:HTML5: Cách gửi biểu mẫu, sau khi nhấn ENTER tại bất kỳ đầu vào văn bản nào?

Hình thức sáng tác bởi chỉ là một đầu vào nộp mọi người dùng nhấn nút ENTER - Hoàn hảo!
Biểu mẫu thứ hai gồm hai đầu vào văn bản không hoạt động theo cách này, nó không gửi khi người dùng nhấn nút ENTER ở bất kỳ đầu vào nào.

Có cách nào để thực hiện một hình thức với nhiều hơn một đầu vào văn bản cư xử theo cách này và tránh việc một nút nộp trong nó?

Nguồn

2015-01-06 charliebrownie

Hãy thử thêm này giữa <form></form> thẻ

<input type="submit" style="display: none" />

Tested nó và nó hoạt động trên trình duyệt Firefox và Chrome. Nếu bạn có loại đầu vào gửi trong biểu mẫu, hãy nhập sẽ tự động gửi nó, bất kể có hiển thị hay không.

Tôi thực sự sử dụng này bản thân mình trong một hình thức đăng nhập, mặc dù trong lĩnh vực Tên truy nhập, nó có ý nghĩa hơn để di chuyển đến trường tiếp theo hơn để nộp. Chỉ trong trường hợp bạn có một trường hợp sử dụng tương tự, đây là đoạn code tôi sử dụng (yêu cầu jQuery)

$('#username').keypress(function(event) { 
    if (event.keyCode == 13 || event.which == 13) { 
     $('#password').focus(); 
     event.preventDefault(); 
    } 
});

Lưu ý rằng có một lỗi nhẹ mặc dù - nếu người sử dụng chọn một tên người dùng trình duyệt autocomplete và nhấn nhập, nó vẫn di chuyển đến trường tiếp theo thay vì chọn nó. Không có thời gian để gỡ lỗi này, nhưng nếu ai đó có thể tìm ra cách để sửa nó, điều đó sẽ rất tuyệt.

Nguồn

2015-01-06 22:08:15 user193130

Gọn gàng, bạn có đang làm điều gì đó tương tự với đầu vào '#password' không? Chỉ tò mò thôi! Ẩn nội dung gửi đã hoạt động tốt, tôi chỉ cần một thứ đơn giản để tiếp tục! – charliebrownie

Tôi có một nút gửi hiển thị trên biểu mẫu và trường '# password' không yêu cầu bất kỳ mã JS nào khi nhấn enter sẽ tự động gửi biểu mẫu như mong đợi. Tôi rất vui vì nó đã giúp :) – user193130

Và tôi đoán rằng nếu trường '# username' của bạn trống nhưng' # password' của bạn không có và biểu mẫu được gửi đi, bạn sẽ xử lý điều đó, đúng không? :) Cảm ơn bạn, thực sự nó đã giúp! – charliebrownie

Bạn sẽ phải tìm phím Enter. Bài đăng này ở đây cho thấy cách thực hiện điều đó. Enter key press event in JavaScript

Nguồn

2015-01-06 22:02:20

Hãy đảm bảo rằng các yếu tố đầu vào của bạn nằm trong phần tử "biểu mẫu" và cung cấp cho phần tử "biểu mẫu" là thuộc tính "hành động".

Nguồn

2015-01-06 22:03:12 Ahmadbaba46

Tôi chụp các hình thức trình sử dụng jQuery, sử dụng '$ (formId) .Trên ('submit', function (e) {...});' mà hoạt động hoàn hảo đối với trường hợp 1 (một dạng nhập văn bản). – charliebrownie

Tôi đang tìm giải pháp cho vấn đề này và muốn chia sẻ giải pháp của mình, dựa trên nhiều bài đăng ở đây. (Thử nghiệm trên hiện đại Chrome/Firefox/IE)

Vì vậy, chỉ sử dụng javascript mã sau nộp biểu mẫu nếu ENTER phím được nhấn trên bất kỳ lĩnh vực hay nếu nút Submit được nhấn. Sau đó nó rõ ràng/thiết lập lại các hình thức, đó là một điều tốt đẹp để làm.

Hy vọng điều đó sẽ hữu ích.

<!DOCTYPE html> 
<html> 
<body> 
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p> 
<p>When you submit the form, a function is triggered which alerts some text.</p> 

<div onKeyPress="return myFunction(event)"> 
    <form id="form01" action="demo_form.asp" onsubmit="return false;" > 
    Enter name: <input type="text" name="fname"> 
    <input type="button" value="Submit" onclick="myFunction(0)"> 
    </form> 
</div> 

<script> 
function myFunction(e) { 
    if((e && e.keyCode == 13) || e == 0) { 
    alert("The form was submitted"); 
    document.forms.form01.submit(); 
    document.forms.form01.fname.value = ""; // could be form01.reset as well 
    } 
} 
</script> 

</body> 
</html>

Nguồn

2015-07-14 19:11:05 user3058813

HTML5: Cách gửi biểu mẫu, sau khi nhấn ENTER tại bất kỳ đầu vào văn bản nào?

Trả lời

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