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

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 nó nên (không có trong Chrome) . Làm thế nào tôi có thể ngăn chặn điều này, và nếu không ngăn chặn nó trong IE, xử lý nó để logic trong sự kiện click không cháy.Sự kiện nhấp chuột vào nút kích hoạt khi nhấn phím Enter ở đầu vào khác nhau (không có biểu mẫu)

<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>

Script

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

Jquery: 1.7.2
IE 9
(trình trong Chrome)

Nguồn

2012-09-07 contactmatt

Trái với câu hỏi, điều này chỉ xảy ra với tôi bằng Chrome và Firefox. Sửa lỗi tương tự (loại nút). –

287

tôi đã cùng một vấn đề và giải quyết nó bằng cách thêm type="button" thuộc tính đến yếu tố <button>, mà IE nghĩ nút như một nút đơn giản thay vì một nút gửi (đó là hành vi mặc định của một yếu tố <button>).

Nguồn

2012-11-23 19:10:07 pallati

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

+94

Có thể bạn sống một ngàn năm. – TheBrain

Sửa lỗi tuyệt vời. Tôi nghĩ rằng các trình duyệt sẽ chỉ tự động gửi vào "Enter" khi bên trong các thẻ

IE nghĩ yếu tố nào button là một gửi (cho dù bạn có form hay không). Nó cũng xử lý báo chí của khóa Enter trong phần tử biểu mẫu dưới dạng gửi biểu mẫu ẩn. Vì vậy, vì nó nghĩ rằng bạn đang cố gắng gửi biểu mẫu của bạn, nó sẽ giúp bạn hiểu và kích hoạt sự kiện click trên (ý tưởng của nó) là gửi nút.

Bạn có thể đính kèm một sự kiện keyup cho một trong hai input hoặc button và kiểm tra sự Enter chìa khóa (e.which === 13) và return false;

Nguồn

2012-09-07 20:55:34

Tôi chạy vào 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 preventDefault(). Trong bộ chọn jQuery của bạn, hãy đặt vào div chứa các hộp văn bản bạn muốn bỏ qua khóa nhập - trong trường hợp của bạn, div "trang". Thay vì chọn toàn bộ div, bạn cũng có thể chỉ định các hộp văn bản bạn muốn bỏ qua cụ thể.

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

Nguồn

2012-10-31 20:01:12

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 loại = "nút". – 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 làm cho tất cả các nút của loại "nút" vẫn còn nó không hoạt động. Sau đó, tôi đã phải ngăn chặn sự kiện sủi bọt khi nhập phím bấm. –

Cảm ơn bạn rất nhiều. Tôi đã hoành hành ở máy tính của tôi trong 2 giờ qua. – Edwin

Một jQuery giải pháp dựa trên 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 sẽ vẫn bong bóng lên đến yếu tố cha mẹ đối với một số lý do ...

Nguồn

2014-04-29 23:29:09 lschult2

Tôi đã có vấn đề này với ASP.NET WebForms:

<asp:Button />

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

Các cách chính xác để làm điều này trong asp.net là thêm

<asp:Button UseSubmitBehavior="false" />

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

Nguồn

2016-07-06 01:19:52 Guilherme

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

Trả lời

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