Ngăn chặn cả hai sự kiện nhòe và nhấp nháy kích hoạt sau khi nhấn enter trong hộp văn bản

Question

Sau khi nhấn nhập Tôi muốn chỉ có sự kiện keyup được kích hoạt trước khi blur được kích hoạt trước. Cách hủy blur khi keyup được kích hoạt với nhập?

Vui lòng không đề xuất ràng buộc cả hai blur và keyup vào một phương thức live() duy nhất.

$(".textbox").on("blur",function() { 
    alert("blur Event fired"); 
}); 

$(".textbox").on("keyup",function (event) { 
    if(event.keyCode == 13){ // Detect Enter 
     alert("KeyUp fired after pressing Enter"); 
    } 
}); 

Answer 1

tôi không thể thay đổi thuộc tính class vì vậy tôi đã kết thúc với,

$(".textbox").on("blur",function() { 
    if($(this).attr('flag')!='1') 
     alert("blur Event fired"); 
}); 

$(".textbox").on("keyup",function (event) { 
    $(this).attr('flag','1'); 
    if(event.keyCode == 13){ // Detect Enter 
     alert("KeyUp fired after pressing Enter"); 
    } 
    $(this).attr('flag','0'); 
}); 

Answer 2

Sửa

Để ngăn chặn cả hai sự kiện từ bắn, bạn sẽ phải bằng cách nào đó đánh dấu phần tử trước khi làm cho nó mất tập trung. Bằng cách đó, trình xử lý sự kiện blur của bạn có thể cho biết sự kiện đó có phải là chủ đề của một khóa hoặc nếu nó bị mất tập trung một cách hợp pháp. Một cái gì đó như thế này:

$(".textbox").live("blur",function (event) { 
    if (!$(this).hasClass('keyupping')) 
     alert("blur Event fired"); 
}); 

$(".textbox").live("keyup",function (event) { 
    $(this).addClass('keyupping'); 
    if(event.keyCode == 13){ // Detect Enter 
     alert("KeyUp fired after pressing Enter"); 
    } 
    $(this).removeClass('keyupping'); 
}); 

Hãy thử nó ra: http://jsfiddle.net/GRMule/sR6zm/

---

Original câu trả lời

Khi sự kiện cho keyup hỏa hoạn, nó chuẩn bị để vẽ hộp thoại cảnh báo trình duyệt, trong đó có tập trung từ tài liệu và áp dụng nó cho hộp thoại phương thức. Điều này gây ra sự kiện mờ để kích hoạt.

Sự kiện blur sau đó nhảy vào và hoàn thành ngữ cảnh thực thi trước keyup biết điều gì đã xảy ra.

này được chứng minh bằng cách sử dụng một cái gì đó không mất sự tập trung ra ngoài yếu tố, như console.log: http://jsfiddle.net/GRMule/7vRLW/

Trình tự các sự kiện cháy là thực hiện cụ thể, có nghĩa là bạn không thể dựa vào Firefox diễn xuất như IE. Xem thông số: http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings. Hãy thử các fiddle với cảnh báo trong IE, và trong trường hợp này bạn sẽ thấy rằng blur không trúng trước khi keyup trong IE 7 - và blur không cháy trong Chrome!

Answer 3

Nó đã được đưa đến sự chú ý của tôi hơn thay vì sau đó cung cấp gợi ý tôi nên cho lời giải thích đầy đủ hơn và các ví dụ mã, do đó ở đây là: luôn luôn có những cách rẻ tiền của thiết lập một biến bên ngoài:

var triggerBlur = true; 
$(".textbox") 
    .live({ 
     blur : function() { 
     if (triggerBlur) {// if not preceded by keyup 'Enter' event 
      alert("blur Event fired"); 
     } 
     // reset variable to true to allow the blur event to be triggered subsequently when not preceded by keyup 'Enter' event 
     triggerBlur = true; 
     }, 
     keyup : function (event) { 
     if(event.which === 13){ // Detect Enter 
      alert("KeyUp fired after pressing Enter"); 
      triggerBlur = false; 
     } 
     }); 

Cũng thích hợp hơn khi sử dụng event.which thay vì event.keyCode (xem http://api.jquery.com/event.which/ để hiểu lý do), và bạn nên sử dụng toán tử định danh '===' chứ không phải là bình đẳng '==' trong javascript, như sau bị hỏng (xem Which equals operator (== vs ===) should be used in JavaScript comparisons?)

Answer 4

Tôi gặp sự cố tương tự. Tôi cho phép người dùng chỉnh sửa một trường duy nhất và khi họ nhấn Enter hoặc di chuyển khỏi trường đó, tôi gửi một yêu cầu Ajax để cập nhật nó. Tôi thấy rằng khi tôi nhấn Enter, yêu cầu Ajax đã được gửi hai lần.

Vì vậy, thay vì gọi yêu cầu của tôi vào Enter, tôi đã cố gắng gọi số $input.blur() thay vào đó và đã hoạt động! Điều đó khiến tôi phải suy nghĩ ... Nếu phím Enter gây ra hiện tượng mờ thì tôi có cần chụp ảnh không?

Trong trường hợp của tôi, tôi không cần. Tôi thấy rằng tất cả những gì tôi cần là mờ bởi vì phím Enter đã kích hoạt nó. Tôi không chắc chắn rằng đó là 100% trên tất cả các trình duyệt, nhưng tôi đã thử nghiệm trên các phiên bản hiện tại của Chrome, Firefox, IE và Safari, tất cả đều hoạt động tốt.

Vì vậy, tôi đề nghị bạn chỉ cần không nắm bắt Enter ở tất cả, hoặc bạn chỉ cần gọi blur() để kích hoạt các hành động bạn cần.

Answer 5

Hãy thử những điều sau đây. Thêm một lớp - thêm trong ví dụ này, trong trình xử lý sự kiện keyup và sửa đổi bộ chọn cho sự kiện mờ sẽ ngăn trình xử lý sự kiện mờ bắn.

$(".textbox:not(.added)").on("blur", function() { 
    alert("blur Event fired"); 
}); 

$(".textbox").on("keyup", function (event) { 
    if (event.keyCode == 13) { 
     $(event.currentTarget).addClass('added'); 
     alert("KeyUp fired after pressing Enter"); 
    } 
}); 

Answer 6

Tôi có đầu vào nơi người dùng có thể thay đổi, tập trung hoặc nhấn enter. Nhưng khi bạn nhấn enter cả hai phím và mờ sẽ được kích hoạt, vì vậy myFunction() được kích hoạt hai lần.

Vì vậy, thay vì viết hai chức năng riêng biệt cho keydown và blur, bạn có thể thay vì đặt chúng vào một chức năng duy nhất:

my_input.on('keydown blur', function (e) { 

    // was it the Enter key? 
    if (e.which == 13) { 
     $(this).blur(); 
    } 

    if (e.type == 'blur') { 
     myFunction(); 
    } 

});