jQuery - tăng sự kiện khi tiêu điểm rời khỏi nhóm điều khiển

Question

Tôi có 3 hộp văn bản trong div và tôi cần tăng sự kiện khi tiêu điểm để lại một trong các đầu vào đó và không đi đến một trong 3 yếu tố đầu vào này.

Miễn là người dùng đang chỉnh sửa một trong 3 điều khiển này, sự kiện sẽ không tăng lên. Sự kiện này sẽ chỉ tăng lên khi trọng tâm đã thay đổi thành điều khiển không phải là một trong những yếu tố đầu vào này.

tôi đã cố gắng sử dụng focusout trên tất cả 3 đầu vào và kiểm tra nếu document.ActiveElement là một trong 3 đầu vào nhưng focusout của một điều khiển xảy ra trước focusin trên khác để document.ActiveElement luôn trống.

Bất kỳ ai cũng có ý tưởng về cách giải quyết vấn đề này?

Answer 1

Tôi sẽ xem xét sử dụng bộ hẹn giờ để giải quyết tình huống khó xử phức tạp này.

Khi tiêu điểm bị mất, hãy khởi động bộ hẹn giờ. Sau đó, bạn có thể hủy hẹn giờ nếu tiêu điểm được đặt khi đầu vào "an toàn" khác.

Something như thế này:

var timeoutID; 

$("#TheSafeZone input").focus(function() { 
    if (timeoutID) { 
     clearTimeout(timeoutID); 
     timeoutID = null; 
    } 
}); 

$("#TheSafeZone input").blur(function() { 
    releaseTheHounds(); 
}); 

function releaseTheHounds() { 
    timeoutID = setTimeout(function() { 
      alert("You're all going to die down here"); 
    }, 1); 
} 

Here is a working example

LƯU Ý: Tôi đã đặt thời gian chờ để chỉ 1ms, điều này dường như làm việc đáng tin cậy đối với tôi nhưng nó có thể là giá trị thực hiện một vài thử nghiệm trong các trình duyệt khác (Tôi đang sử dụng Chrome). Tôi đoán đó là cách mà công cụ JS xử lý sự kiện, nhưng tôi không biết đủ về điều đó để tự tin nói rằng tất cả các trình duyệt sẽ hoạt động giống nhau

Answer 2

Đặt sự kiện "Làm mờ" và "Lấy nét" với logic ngược lại để khi bao giờ người dùng rời khỏi nhóm các điều khiển được chỉ định trong DIV chỉ sự kiện "Làm mờ" sẽ được kích hoạt.

$(document).on("blur","#edit-area .form-control", function (event) { 
     $('.editButtons').show(); 

    }); 
    $(document).on("focus","#edit-area .form-control", function (event) { 
     $('.editButtons').hide(); 

    });