Kiểm tra xem có đầu vào nào có tiêu điểm

Question

Tôi đang tạo thứ gì đó có phím tắt, ví dụ: bạn nhấn Ctrl + m để mở menu. Tôi sử dụng jQuery và plugin jwerty cho điều đó, điều này trông giống như mã sau:

jwerty.key('m', function() { 
    toggleMenu(); 
}); 

Khai thác phím "m" sẽ kích hoạt chức năng toggleMenu.

Bây giờ tôi đã tự hỏi làm thế nào để ngăn chặn chức năng này được kích hoạt trong khi người dùng đang gõ vào một lĩnh vực đầu vào hoặc textarea.

Answer 1

Tôi chưa bao giờ sử dụng jwerty, nhưng tôi muốn đề nghị:

jwerty.key('m', function (e) { 
    if (e.target.tagName.toLowerCase() !== 'input') { 
     toggleMenu(); 
    } 
}); 

này kiểm tra các mục tiêu của sự kiện này, và nếu đó là không một input, gọi toggleMenu() chức năng; nếu nó là an input, nó không có gì (mặc dù bạn rõ ràng có thể return false nếu bạn muốn).

Để giải thích cho textarea, như tôi thực sự cần phải làm, bên trên có thể được mở rộng (thêm một khoản để đánh giá if, hoặc những điều sau đây, switch cách tiếp cận dựa trên có thể được thực hiện:

jwerty.key('m', function (e) { 
    switch (e.target.tagName.toLowerCase()) { 
     case 'input': 
     case 'textarea': 
      break; 
     default: 
      toggleMenu(); 
      break; 
    } 
}); 

Nếu phần tử mục tiêu là một trong hai một input hoặc textarea, nhấn m không có gì, trong khi đó nếu không một trong hai yếu tố trạng thái mặc định đã được nhập và toggleMenu() được gọi.

Answer 2

Một cách sẽ là thêm một trình xử lý sự kiện khác vào các đầu vào và văn bản của bạn gọi event.stopPropagation() (hoặc nếu bạn sử dụng jQuery, return false). Bằng cách đó, trình xử lý sự kiện sẽ được kích hoạt trước tiên, và nó sẽ ngăn chặn sự kiện "lan truyền" tới trình xử lý hiện có của bạn.

Một tùy chọn khác là kiểm tra sự kiện bên trong trình xử lý hiện có của bạn để xem sự kiện có xuất phát từ đầu vào/văn bản hay không (xem các câu trả lời khác nếu bạn muốn thực hiện phương pháp này; bạn sẽ muốn sử dụng câu trả lời của David, vì activeElement không được các trình duyệt cũ hỗ trợ: Which browsers support document.activeElement?).

Answer 3

Bạn có thể sử dụng :focus chọn được cung cấp bởi jQuery (và một số trình duyệt) và is chức năng để kiểm tra nếu một mục có tập trung:

$(".my-thing").is(':focus')