2012-01-05 47 views
5

Tôi có một hộp nhập văn bản và kiểu nút đơn giản trên trang của mình.Nhấn Enter Luôn gửi biểu mẫu

<input id="sText" type="text" /> 
<input id="sButton" type="button" value="button" /> 

Tôi chụp một lần nhấp nút bằng jQuery.

$("[id$=sButton]").click(function() { 

     ...do Stuff 

    }); 

Mã trên chỉ hoạt động tốt miễn là tôi nhấp vào nút theo cách thủ công. Tôi bắt đầu gặp sự cố khi tôi muốn sử dụng phím "enter" để nhấp vào nút. Không có vấn đề gì tôi làm, tôi không thể ngăn chặn phím nhập thực hiện chức năng gửi mặc định của nó.

Điều đầu tiên tôi làm là thay đổi loại đầu vào từ "gửi" thành "nút".

tôi đã cố gắng thiết lập onsubmit của hình thức để onsubmit="return false;"

tôi đã cố gắng sử dụng jQuery để nắm bắt được nhập sự kiện quan trọng:

$("#sText").keyup(function (event) { 
     if (event.keyCode == 13) { 
      alert("Enter!"); 
      // $("#sButton").click(); 
     } 
    }); 

Mỗi lần tôi nhấn phím enter, nó giống như tôi đang nộp mẫu đơn , toàn bộ trang sẽ làm mới. Mã jQuery trên không nắm bắt được phím gõ "enter", nhưng biểu mẫu vẫn gửi và làm mới trang.

Tôi không chắc chắn những gì đang diễn ra.

Trả lời

9

Bạn cần hủy hành động.

event.preventDefault(); 

NHƯNG tôi tin rằng bạn chỉ có thể hủy gửi biểu mẫu bằng cách nhấn phím, không phải khóa.

+0

+1 cho đề xuất keydown –

+1

Ngoài việc thêm "event.preventDefault()", tôi cũng phải thay đổi "keyup" thành "nhấn phím", không có khóa hoặc phím tắt nào hoạt động. Cảm ơn! – SharpBarb

+0

Dường như việc giữ kiểm tra phím nhập và nút làm loại nút thay vì chuyển nó trở lại bản gửi đang sử dụng nhiều mã bổ sung. –

1

Epascarello đúng, bạn cần hủy yêu cầu gửi kèm theo mã mà anh ấy cung cấp cho bạn. Nhưng bạn cũng nên thay đổi nút quay lại kiểu gửi để phím ENTER và nhấp vào nút cũng làm như vậy. Bằng cách đó, bạn chỉ phải xử lý việc hủy gửi trong một khu vực.

<input id="sButton" type="submit" value="Submit" /> 

JQuery:

$("#YourFormId").submit(function(event){ 

     event.preventDefault(); 
     ...do Stuff 

    }); 

Bằng cách này một chức năng xử lý các phím ENTER và nút bấm.

EDIT: Đặt event.preventDefault() làm câu lệnh đầu tiên.

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