Ai đó có thể vui lòng cho tôi biết cách gửi biểu mẫu HTML khi phím quay lại được nhấn và nếu không có nút nào trong biểu mẫu không? Nút gửi không có ở đó . Tôi đang sử dụng div tùy chỉnh thay vì div đó.
Câu trả lời:
IMO, đây là câu trả lời rõ ràng nhất:
<form action="" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password"/><br/>
<div class="yourCustomDiv"/>
<input type="submit" style="display:none"/>
</form>Tốt hơn, nếu bạn đang sử dụng javascript để gửi biểu mẫu bằng div tùy chỉnh, bạn cũng nên sử dụng javascript để tạo nó và để đặt kiểu hiển thị: không có trên nút. Bằng cách này, người dùng bị vô hiệu hóa javascript sẽ vẫn thấy nút gửi và có thể nhấp vào nút đó.
Cần lưu ý rằng hiển thị: không có nào sẽ khiến IE bỏ qua đầu vào. Tôi đã tạo một ví dụ JSFiddle mới bắt đầu dưới dạng biểu mẫu chuẩn và sử dụng tính năng nâng cao lũy tiến để ẩn gửi và tạo div mới. Tôi đã sử dụng kiểu CSS từ StriplingWarrior .
Để gửi biểu mẫu khi nhấn phím enter, hãy tạo một hàm javascript dọc theo các dòng này.
function checkSubmit(e) {
if(e && e.keyCode == 13) {
document.forms[0].submit();
}
}
Sau đó, thêm sự kiện vào bất kỳ phạm vi nào bạn cần, ví dụ như trên thẻ div:
<div onKeyPress="return checkSubmit(event)"/>
Mặc dù vậy, đây cũng là hành vi mặc định của Internet Explorer 7 (có thể là các phiên bản trước đó).
Tôi đã thử các chiến lược dựa trên javascript / jQuery khác nhau, nhưng tôi vẫn gặp sự cố. Vấn đề mới nhất phát sinh liên quan đến việc gửi ngẫu nhiên khi người dùng sử dụng phím enter để chọn từ danh sách tự động hoàn thành được tích hợp sẵn của trình duyệt. Cuối cùng tôi đã chuyển sang chiến lược này, chiến lược này dường như hoạt động trên tất cả các trình duyệt mà công ty tôi hỗ trợ:
<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>
.hidden-submit {
border: 0 none;
height: 0;
width: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
Điều này tương tự như câu trả lời hiện được chấp nhận bởi Chris Marasti-Georg, nhưng bằng cách tránh display: none, nó dường như hoạt động chính xác trên tất cả các trình duyệt.
Tôi đã chỉnh sửa mã ở trên để bao gồm một phủ định tabindexđể nó không nắm bắt được phím tab. Mặc dù về mặt kỹ thuật điều này sẽ không xác thực trong HTML 4, nhưng thông số kỹ thuật HTML5 bao gồm ngôn ngữ để làm cho nó hoạt động theo cách mà hầu hết các trình duyệt đã triển khai.
Sử dụng <button>thẻ. Theo tiêu chuẩn W3C:
Các nút được tạo bằng phần tử BUTTON có chức năng giống như các nút được tạo bằng phần tử INPUT, nhưng chúng cung cấp khả năng hiển thị phong phú hơn: phần tử BUTTON có thể có nội dung. Ví dụ: phần tử BUTTON có chứa hình ảnh có chức năng giống như và có thể giống phần tử INPUT có kiểu được đặt thành "hình ảnh", nhưng loại phần tử BUTTON cho phép nội dung.
Về cơ bản có một 'tag, <button>mà không cần javascript , mà cũng có thể gửi một biểu mẫu. Nó có thể được tạo kiểu theo cách của một <div>thẻ (bao gồm cả <img />bên trong thẻ nút). Các nút từ <input />thẻ gần như không linh hoạt.
<button type="submit">
<img src="my-icon.png" />
Clicking will submit the form
</button>
Có ba loại để đặt trên <button>; chúng ánh xạ đến các <input>loại nút.
<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>
Tiêu chuẩn
Tôi sử dụng <button>thẻ vớicss-sprites và một chút csstạo kiểu để có được các nút biểu mẫu đầy màu sắc và chức năng. Lưu ý rằng bạn có thể viết css, ví dụ: <a class="button">các liên kết chia sẻ để tạo kiểu với <button>phần tử.
Tôi tin rằng đây là những gì bạn muốn.
//<![CDATA[
//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
if (e.which == 13) { sendform(); }
}
//Form to send
function sendform() {
document.forms[0].submit();
}
//]]>
Mỗi khi nhấn một phím, hàm enter () sẽ được gọi. Nếu phím được nhấn khớp với phím enter (13), thì sendform () sẽ được gọi và biểu mẫu gặp phải đầu tiên sẽ được gửi. Điều này chỉ dành cho Firefox và các trình duyệt tuân thủ các tiêu chuẩn khác.
Nếu bạn thấy mã này hữu ích, hãy nhớ bỏ phiếu cho tôi!
Đây là cách tôi thực hiện với jQuery
j(".textBoxClass").keypress(function(e)
{
// if the key pressed is the enter key
if (e.which == 13)
{
// do work
}
});
Javascript khác sẽ không quá khác biệt. bắt đang kiểm tra đối số nhấn phím của "13", là phím enter
e.which == 10.
Sử dụng tập lệnh sau.
<SCRIPT TYPE="text/javascript">
<!--
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
myfield.form.submit();
return false;
}
else
return true;
}
//-->
</SCRIPT>
Đối với mỗi trường sẽ gửi biểu mẫu khi người dùng nhấn enter, hãy gọi hàm người gửi như sau.
<FORM ACTION="../cgi-bin/formaction.pl">
name: <INPUT NAME=realname SIZE=15><BR>
password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
Tôi sử dụng phương pháp này:
<form name='test' method=post action='sendme.php'>
<input type=text name='test1'>
<input type=button value='send' onClick='document.test.submit()'>
<input type=image src='spacer.gif'> <!-- <<<< this is the secret! -->
</form>
Về cơ bản, tôi chỉ thêm một đầu vào vô hình của loại hình ảnh (trong đó " spacer.gif " là gif trong suốt 1x1).
Bằng cách này, tôi có thể gửi biểu mẫu này bằng nút 'gửi' hoặc đơn giản bằng cách nhấn enter trên bàn phím.
Đây là thủ thuật!
Tại sao bạn không áp dụng các kiểu gửi div cho một nút gửi? Tôi chắc rằng có một đoạn mã javascript cho việc này nhưng điều đó sẽ dễ dàng hơn.
Nếu bạn đang sử dụng asp.net, bạn có thể sử dụng thuộc tính defaultButton trên biểu mẫu.
Tôi nghĩ bạn thực sự nên có nút gửi hoặc hình ảnh gửi ... Bạn có lý do cụ thể để sử dụng "div gửi" không? Nếu bạn chỉ muốn phong cách tùy chỉnh, tôi khuyên bạn nên <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm
Mở rộng các câu trả lời, đây là những gì đã làm việc cho tôi, có thể ai đó sẽ thấy nó hữu ích.
Html
<form method="post" action="/url" id="editMeta">
<textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>
Js
function submitOnEnter(e) {
if (e.which == 13) {
document.getElementById("editMeta").submit()
}
}
Tương tự như ví dụ của Chris Marasti-Georg, thay vào đó sử dụng javascript nội tuyến. Về cơ bản, hãy thêm onkeypress vào các trường bạn muốn phím enter hoạt động. Ví dụ này hoạt động trên trường mật khẩu.
<html>
<head><title>title</title></head>
<body>
<form action="" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
<input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>
Vì các display: nonenút và đầu vào sẽ không hoạt động trong Safari và IE, tôi thấy rằng cách dễ nhất, không cần thêm javascript hack , là chỉ cần thêm một vị trí tuyệt đối <button />vào biểu mẫu và đặt nó xa màn hình.
<form action="" method="get">
<input type="text" name="name" />
<input type="password" name="password" />
<div class="yourCustomDiv"/>
<button style="position:absolute;left:-10000px;right:9990px"/>
</form>
Điều này hoạt động trong phiên bản hiện tại của tất cả các trình duyệt chính kể từ tháng 9 năm 2016.
Rõ ràng là nó được khuyến khích (và đúng hơn về mặt ngữ nghĩa) để chỉ tạo kiểu <button/>như mong muốn.
Sử dụng thuộc tính "tự động lấy nét" hoạt động để cung cấp tiêu điểm đầu vào cho nút theo mặc định. Trên thực tế, việc nhấp vào bất kỳ điều khiển nào trong biểu mẫu cũng tập trung vào biểu mẫu, một yêu cầu để biểu mẫu phản ứng với QUAY LẠI. Vì vậy, "tự động lấy nét" thực hiện điều đó cho bạn trong trường hợp người dùng không bao giờ nhấp vào bất kỳ điều khiển nào khác trong biểu mẫu.
Vì vậy, "tự động lấy nét" tạo ra sự khác biệt quan trọng nếu người dùng không bao giờ nhấp vào bất kỳ điều khiển biểu mẫu nào trước khi nhấn QUAY LẠI.
Nhưng ngay cả khi đó, vẫn có 2 điều kiện cần được đáp ứng để điều này hoạt động mà không cần JS:
a) bạn phải chỉ định một trang để truy cập (nếu để trống, nó sẽ không hoạt động). Trong ví dụ của tôi, nó là hello.php
b) kiểm soát phải hiển thị. Có thể hình dung bạn có thể di chuyển nó ra khỏi trang để ẩn, nhưng bạn không thể sử dụng display: none hoặc display: hidden. Những gì tôi đã làm là sử dụng kiểu nội tuyến để chỉ di chuyển nó ra khỏi trang sang bên trái 200px. Tôi đã tạo chiều cao 0px để nó không chiếm dung lượng. Vì nếu không nó vẫn có thể làm gián đoạn các điều khiển khác ở trên và dưới. Hoặc bạn cũng có thể thả nổi phần tử.
<form action="hello.php" method="get">
Name: <input type="text" name="name"/><br/>
Pwd: <input type="password" name="password"/><br/>
<div class="yourCustomDiv"/>
<input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>