Sự kiện Nhấp vào nút kích hoạt khi nhấn phím Enter ở các đầu vào khác nhau (không có biểu mẫu)

111

Logic này được kích hoạt khi nhấn "Enter" trong đầu vào "Số tiền" và tôi không tin là nên làm như vậy (không có trong Chrome). Làm cách nào để ngăn chặn điều này và nếu không ngăn được nó trong IE, hãy xử lý nó để logic trong sự kiện nhấp chuột không kích hoạt.

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

Kịch bản

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});

Truy vấn: 1.7.2
IE 9
(Hoạt động trong Chrome)

jquery internet-explorer

— contactmatt
nguồn

1

Trái ngược với câu hỏi, điều này chỉ xảy ra với tôi với Chrome và Firefox. Mặc dù sửa chữa tương tự (loại nút).

— Tim Grant

324

Tôi đã gặp vấn đề tương tự và giải quyết nó bằng cách thêm type="button"thuộc tính vào <button>phần tử, theo đó IE cho rằng nút này là một nút đơn giản thay vì nút gửi (đó là hành vi mặc định của một <button>phần tử).

— pallati
nguồn

6

Tôi đã gặp vấn đề tương tự với Firefox. các type = "button" thuộc tính cũng giải quyết nó cho tôi

— Alexander Fradiani

109

Cầu mong bạn sống một ngàn năm.

— TheBrain

4

Sửa chữa xuất sắc. Tôi nghĩ rằng các trình duyệt sẽ chỉ tự động gửi trên "Enter" khi bên trong các thẻ <form>. Nhưng tôi thấy tôi đã sai.

— Clayton Bell,

2

Nhiều ngày la mắng IE9 (giữa lúc tôi quát tháo những thứ khác mà tôi phải hét lên) và đây là giải pháp. Dang hot.

— phatskat

5

Đã bị vấn đề này cắn hai lần chỉ trong một vài tuần. Chỉ cảm thấy kỳ lạ khi phải gọi ra type="button"trong một <button>phần tử. haha ... :) Hy vọng rằng tôi nhớ điều này cho lần sau.

— Sam

32

Tôi gặp phải vấn đề này ngày hôm nay. IE giả định rằng nếu bạn nhấn phím enter trong bất kỳ trường văn bản nào, bạn muốn gửi biểu mẫu - ngay cả khi các trường đó không phải là một phần của biểu mẫu và ngay cả khi nút không thuộc loại "gửi".

Bạn phải ghi đè hành vi mặc định của IE bằng ngăn chặn Default (). Trong bộ chọn jQuery của bạn, hãy đặt div chứa các hộp văn bản mà bạn muốn bỏ qua phím enter - trong trường hợp của bạn là div "trang". Thay vì chọn toàn bộ div, bạn cũng có thể chỉ định cụ thể các hộp văn bản mà bạn muốn bỏ qua.

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});

— Christian Clinton
nguồn

Giải pháp tốt nhất khi bạn cần sử dụng các thành phần tùy chỉnh và bạn không thể thêm type = "button".

— FireZenk

Cảm ơn Clinton, điều này đã làm việc cho tôi. Lần đầu tiên tôi cố gắng thực hiện tất cả các nút thuộc loại "nút" nhưng nó vẫn không hoạt động. Sau đó, tôi phải ngăn chặn sự kiện sôi sục khi nhấn phím enter.

— Rupesh Kumar Tiwari

Cảm ơn bạn rất nhiều. Tôi đã sử dụng máy tính của mình trong 2 giờ qua.

— Edwin

4

Tôi gặp sự cố này với ASP.NET WebForms:

<asp:Button />

Điều này KHÔNG thể được giải quyết bằng cách chỉ thêm type = "button" vì ASP.NET thay thế nó bằng type = "submit" (bạn có thể thấy hành vi này trong trình duyệt nếu bạn kiểm tra phần tử.)

Cách chính xác để thực hiện việc này trong asp.net là thêm

<asp:Button UseSubmitBehavior="false" />

vào nút. ASP sẽ tự động thêm thuộc tính type = "button".

— Guilherme
nguồn

2

IE cho rằng bất kỳ buttonphần tử nào cũng là một nút gửi (cho dù bạn có formhay không). Nó cũng xử lý việc nhấn Enterphím trong một phần tử biểu mẫu như một lần gửi biểu mẫu ngầm. Vì vậy, vì nó nghĩ rằng bạn đang cố gắng gửi biểu mẫu của mình, nó sẽ tìm ra nó sẽ giúp bạn và kích hoạt clicksự kiện trên (nó nghĩ là gì) nút gửi .

Bạn có thể đính kèm một keyupsự kiện vào inputhoặc buttonvà và kiểm tra Enterkhóa ( e.which === 13) vàreturn false;

— Khỉ dị giáo
nguồn

1

Một giải pháp dựa trên jQuery thực hiện điều này cho mọi nút là:

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

Tuy nhiên, sự kiện nhấp chuột vẫn sẽ xuất hiện đối với các phần tử chính vì một số lý do ...

— lschult2
nguồn

0

Đối với Chrome, bạn có thể thêm <button type="submit" style="display:none"/> Vì Trong chrome, loại nút mặc định là "submit"

Đối với IE, tôi đã thử làm tương tự với type="button"(Trong IE loại nút mặc định là "nút") Nhưng không hoạt động tốt.

Vì vậy, đây là giải pháp. Trong HTML, hãy thêm (keypress)=xxx($event)vào biểu mẫu của bạn. Trong TS,

xxx(event) {
 if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}

Ở trên sẽ hoạt động trong tất cả các trường hợp như trình duyệt chéo, nhấp chuột bình thường và luồng tab.

— Tamil.S
nguồn