Trên trang đầu của trang web tôi đang xây dựng, một số người <div>sử dụng lớp :hovergiả CSS để thêm đường viền khi chuột ở trên chúng. Một trong những cái <div>chứa một <form>cái, sử dụng jQuery, sẽ giữ đường viền nếu một đầu vào bên trong nó có tiêu điểm. Điều này hoạt động hoàn hảo ngoại trừ IE6 không hỗ trợ :hovertrên bất kỳ yếu tố nào ngoài <a>s. Vì vậy, đối với trình duyệt này, chúng tôi chỉ sử dụng jQuery để bắt chước CSS :hoverbằng $(#element).hover()phương thức này. Vấn đề duy nhất là, bây giờ jQuery xử lý cả biểu mẫu focus() và hover() khi đầu vào có tiêu điểm thì người dùng di chuyển chuột vào và ra, đường viền sẽ biến mất.

Tôi đã nghĩ rằng chúng ta có thể sử dụng một số loại điều kiện để ngăn chặn hành vi này. Ví dụ: nếu chúng tôi đã thử nghiệm trên chuột nếu bất kỳ đầu vào nào có tiêu điểm, chúng tôi có thể ngăn chặn đường viền đi. AFAIK, không có :focusbộ chọn trong jQuery, vì vậy tôi không chắc làm thế nào để thực hiện điều này. Có ý kiến ​​gì không?

jQuery 1.6+

jQuery đã thêm một :focusbộ chọn để chúng ta không còn cần phải tự thêm nó nữa. Chỉ dùng$("..").is(":focus")

jQuery 1.5 trở xuống

Chỉnh sửa: Khi thời gian thay đổi, chúng tôi tìm thấy các phương pháp tốt hơn để kiểm tra trọng tâm, yêu thích mới là ý chính này từ Ben Alman :

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

Trích dẫn từ Mathias Bynens tại đây :

Lưu ý rằng (elem.type || elem.href)thử nghiệm đã được thêm vào để lọc ra các kết quả dương tính giả như cơ thể. Bằng cách này, chúng tôi đảm bảo lọc ra tất cả các yếu tố ngoại trừ điều khiển biểu mẫu và siêu liên kết.

Bạn đang xác định một bộ chọn mới. Xem Plugin / Authoring . Sau đó, bạn có thể làm:

if ($("...").is(":focus")) {
  ...
}

hoặc là:

$("input:focus").doStuff();

Bất kỳ jQuery

Nếu bạn chỉ muốn tìm ra yếu tố nào có trọng tâm, bạn có thể sử dụng

$(document.activeElement)

Nếu bạn không chắc chắn phiên bản sẽ là 1.6 hoặc thấp hơn, bạn có thể thêm :focusbộ chọn nếu thiếu:

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );

CSS:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

    $('input').blur(function() {
        $('input').removeClass("focus");
      })
      .focus(function() {
        $(this).addClass("focus")
      });
  });

Đây là một câu trả lời mạnh mẽ hơn câu trả lời hiện được chấp nhận:

jQuery.expr[':'].focus = function(elem) {
  return elem === document.activeElement && (elem.type || elem.href);
};

Lưu ý rằng (elem.type || elem.href)thử nghiệm đã được thêm vào để lọc ra dương tính giả như thế nào body. Bằng cách này, chúng tôi đảm bảo lọc ra tất cả các yếu tố ngoại trừ điều khiển biểu mẫu và siêu liên kết.

(Lấy từ ý chính này của Ben Alman .)

Cập nhật tháng 4 năm 2015

Vì câu hỏi này đã xuất hiện được một thời gian và một số quy ước mới đã được đưa ra, tôi cảm thấy rằng tôi nên đề cập đến .livephương pháp này đã bị khấu hao.

Ở vị trí của nó, .onphương pháp hiện đã được giới thiệu.

Tài liệu của họ khá hữu ích trong việc giải thích cách thức hoạt động của nó;

Phương thức .on () gắn các trình xử lý sự kiện vào tập hợp các phần tử hiện được chọn trong đối tượng jQuery. Kể từ jQuery 1.7, phương thức .on () cung cấp tất cả các chức năng cần thiết để đính kèm các trình xử lý sự kiện. Để được trợ giúp chuyển đổi từ các phương thức sự kiện jQuery cũ hơn, hãy xem .bind (), .delegate () và .live ().

Vì vậy, để bạn nhắm mục tiêu sự kiện 'tập trung đầu vào', bạn có thể sử dụng điều này trong một tập lệnh. Cái gì đó như:

$('input').on("focus", function(){
   //do some stuff
});

Điều này khá mạnh mẽ và thậm chí cho phép bạn sử dụng phím TAB.

Tôi không hoàn toàn chắc chắn những gì bạn theo đuổi nhưng điều này nghe có vẻ như có thể đạt được bằng cách lưu trữ trạng thái của các phần tử đầu vào (hoặc div?) Làm biến:

$('div').each(function(){

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // do something
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // do something
        } else { }
    });

    $('input', this)
        .focus(function(){
            childInputHasFocus = true;
        })
        .blur(function(){
            childInputHasFocus = false;
        });
});

Một cách khác để sử dụng các lớp để đánh dấu trạng thái của một phần tử là chức năng lưu trữ dữ liệu nội bộ .

PS: Bạn có thể lưu trữ booleans và bất cứ điều gì bạn muốn bằng cách sử dụng data()chức năng. Nó không chỉ là về chuỗi :)

$("...").mouseover(function ()
{
    // store state on element
}).mouseout(function ()
{
    // remove stored state on element
});

Và sau đó chỉ là vấn đề truy cập trạng thái của các yếu tố.

nếu bất cứ ai quan tâm có một cách tốt hơn để lấy nét ngay bây giờ, $(foo).focus(...)

http://api.jquery.com/f Focus /

Bạn đã nghĩ về việc sử dụng mouseOver và mouseOut để mô phỏng điều này. Đồng thời nhìn vào mouseNhập và mouseLeave

Theo dõi cả hai trạng thái (lơ lửng, tập trung) dưới dạng cờ đúng / sai và bất cứ khi nào một thay đổi, hãy chạy một chức năng loại bỏ đường viền nếu cả hai đều sai, nếu không thì hiển thị đường viền.

Vì vậy: bộ onf Focus tập trung = true, bộ onblur tập trung = false. bộ onmouseover hovered = true, bộ onmouseout hovered = false. Sau mỗi sự kiện này chạy một chức năng thêm / xóa đường viền.

Theo tôi biết, bạn không thể hỏi trình duyệt nếu bất kỳ đầu vào nào trên màn hình có tiêu điểm, bạn phải thiết lập một số loại theo dõi tiêu điểm.

Tôi thường có một biến gọi là "noF Focus" và đặt nó thành true. Sau đó, tôi thêm một sự kiện tập trung vào tất cả các đầu vào làm cho noF Focus sai. Sau đó, tôi thêm một sự kiện mờ cho tất cả các đầu vào đặt noF Focus trở lại đúng.

Tôi có một lớp MooTools xử lý việc này khá dễ dàng, tôi chắc chắn rằng bạn có thể tạo một plugin jquery để làm điều tương tự.

Khi đã được tạo, bạn có thể kiểm tra noF Focus trước khi thực hiện bất kỳ hoán đổi đường viền nào.

Không có: tiêu điểm, nhưng có: http://docs.jquery.com/Selector/selected đã chọn

nhưng nếu bạn muốn thay đổi cách mọi thứ trông dựa trên những gì được chọn, có lẽ bạn nên làm việc với các sự kiện mờ.

http://docs.jquery.com/Events/blur

Có một plugin để kiểm tra xem một phần tử có được tập trung hay không: http://plugins.jquery.com/project/f Focused

$('input').each(function(){
   if ($(this) == $.focused()) {
      $(this).addClass('focused');
   }
})

Tôi đã đặt một sự kiện .live ("tiêu điểm") để chọn () (tô sáng) nội dung của kiểu nhập văn bản để người dùng không phải chọn nó trước khi nhập giá trị mới.

$ (formObj) .select ();

Do sự kỳ quặc giữa các trình duyệt khác nhau, lựa chọn đôi khi sẽ bị thay thế bởi lần nhấp gây ra nó và nó sẽ bỏ chọn nội dung ngay sau khi ủng hộ việc đặt con trỏ trong trường văn bản (hoạt động chủ yếu là ok trong FF nhưng không thành công trong IE)

Tôi nghĩ rằng tôi có thể giải quyết điều này bằng cách đặt một chút chậm trễ vào việc chọn ...

setTimeout (function () {$ (formObj) .select ();}, 200);

Điều này hoạt động tốt và lựa chọn sẽ tiếp tục, nhưng một vấn đề buồn cười nảy sinh .. Nếu bạn chuyển từ trường này sang trường tiếp theo, tiêu điểm sẽ chuyển sang trường tiếp theo trước khi chọn. Vì chọn lấy cắp tiêu điểm, tiêu điểm sẽ quay lại và kích hoạt sự kiện "lấy nét" mới. Điều này đã kết thúc trong một loạt các đầu vào chọn nhảy múa trên khắp màn hình.

Một giải pháp khả thi sẽ là kiểm tra xem trường vẫn tập trung trước khi thực hiện select (), nhưng như đã đề cập, không có cách nào đơn giản để kiểm tra ... Tôi cuối cùng chỉ phân phối với toàn bộ tô sáng tự động, thay vì chuyển những gì nên làm một lệnh jQuery select () gọi vào một hàm lớn với các chương trình con ...

Những gì tôi cố gắng làm là tạo ra một lớp tùy ý gọi là .elementhasf Focus, được thêm và xóa trong hàm jQuery Focus (). Khi hàm hover () chạy trên chuột, nó sẽ kiểm tra .elementhasf Focus:

if(!$("#quotebox").is(".boxhasfocus")) $(this).removeClass("box_border");

Vì vậy, nếu nó không có lớp đó (đọc: không có phần tử nào trong div có tiêu điểm) thì đường viền sẽ bị xóa. Nếu không, không có gì xảy ra.

Đơn giản

 <input type="text" /> 



 <script>
     $("input").focusin(function() {

    alert("I am in Focus");

     });
 </script>