Vô hiệu hoá gửi biểu mẫu thông qua phím Enter trên chỉ một số trường duy nhất

Tôi muốn giữ lại các biểu mẫu gửi thông thường khi tôi nhấn Enter vì hành vi của người dùng quen thuộc. Nhưng theo phản xạ, họ thường nhấn enter khi họ kết thúc bằng một hộp nhập văn bản - nhưng trước khi chúng thực sự được thực hiện với biểu mẫu đầy đủ.Vô hiệu hoá gửi biểu mẫu thông qua phím Enter trên chỉ một số trường duy nhất

Tôi chỉ muốn chiếm đoạt khóa Enter khi tập trung vào một loại đầu vào nhất định.

Nhìn Related Questions này trông giống như những gì tôi đang tìm kiếm:

if (document.addEventListener) { 
    document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false); 
} else { 
    document.getElementById('strip').onkeypress = HandleKeyPress; 
}

nhưng phần if (document.addEventListener) { là xa lạ đối với tôi.

Nguồn

2010-05-08 justSteve

Điều đó được gọi là phát hiện tính năng. Nếu trình duyệt sử dụng cú pháp 'addEventListener()' để thêm trình lắng nghe sự kiện, sẽ có một đối tượng hàm gọi là 'addEventListener' trong mọi đối tượng nút DOM (và cụ thể, trong đối tượng tài liệu). Một đối tượng hàm trở thành true khi được chuyển đổi thành boolean, do đó nhánh đầu tiên sẽ chạy. Nếu trình duyệt không hiểu cú pháp addEventListener, 'document.addEventListener' sẽ không được định nghĩa (chuyển đổi thành false) và mã dự phòng trong nhánh thứ hai được thực hiện. – Tgr

Rất nhiều đánh giá cao giải thích được. cám ơn! – justSteve

127

Bạn có thể nắm bắt và hủy nhập keypress trên những lĩnh vực như thế này:

$('.noEnterSubmit').keypress(function(e){ 
    if (e.which == 13) return false; 
    //or... 
    if (e.which == 13) e.preventDefault(); 
});

Sau đó, trên đầu vào của bạn chỉ cần cung cấp cho họ một class="noEnterSubmit" :)

Nhìn về phía trước trong trường hợp những người khác tìm thấy sau này, trong jQuery 1.4.3 (không ra được nêu ra), bạn có thể rút ngắn nó như thế này:

$('.noEnterSubmit').bind('keypress', false);

Nguồn

2010-05-08 12:24:31

+46

Bạn cũng cần lưu ý rằng 'bind ('keypress', false);' sẽ _prohibit tất cả dữ liệu entry_. Vì vậy, nếu bạn muốn áp dụng điều này cho các yếu tố đầu vào văn bản, hãy sử dụng giải pháp đầu tiên – hohner

Nếu bạn đang sử dụng các trường động, bạn nên thay đổi thành '$ ('body') trên '' nhấn phím ',' .noEnterSubmit ', function () {...}); ' – seangates

Sử dụng một lớp không thích hợp để kiểm soát ngữ nghĩa. Sử dụng tốt hơn dữ liệu-nosubmit hoặc tương tự HTML 5 dữ liệu thuộc tính cho cùng một. $ ('[data-nosubmit]') là bộ chọn, sau đó. –

để cho phép chỉ nhập vào một lớp học cụ thể (trong ví dụ này, 'enterSubmit'):

jQuery(document).ready(function(){ 
    jQuery('input').keypress(function(event){ 
     var enterOkClass = jQuery(this).attr('class'); 
     if (event.which == 13 && enterOkClass != 'enterSubmit') { 
      event.preventDefault(); 
      return false; 
     } 
    }); 
});

Nguồn

2013-04-02 04:58:57

Chỉ cần thêm đoạn mã sau vào <Head> Tag trong Mã HTML của bạn. Nó sẽ gửi biểu mẫu trên phím Enter cho tất cả các trường trên biểu mẫu

<script type="text/javascript"> 
    function stopEnterKey(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 = stopEnterKey; 
</script>

Nguồn

2013-05-27 11:57:40

Vô hiệu hoá gửi biểu mẫu thông qua phím Enter trên chỉ một số trường duy nhất

Trả lời

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