On the front page of a site I am building, several <div>s use the CSS :hover pseudo-class to add a border when the mouse is over them. One of the <div>s contains a <form> which, using jQuery, will keep the border if an input within it has focus. This works perfectly except that IE6 does not support :hover on any elements other than <a>s. So, for this browser only we are using jQuery to mimic CSS :hover using the $(#element).hover() method. The only problem is, now that jQuery handles both the form focus() and hover(), when an input has focus then the user moves the mouse in and out, the border goes away.

我在想我们可以用一些条件来阻止这种行为。例如,如果我们在鼠标移出时测试任何输入是否有焦点,我们可以阻止边界消失。AFAIK,在jQuery中没有:focus选择器,所以我不确定如何做到这一点。什么好主意吗?


当前回答

我所做的是创建一个名为.elementhasfocus的任意类,它在jQuery focus()函数中添加和删除。当hover()函数在鼠标离开时运行,它会检查.elementhasfocus:

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

因此,如果它没有这个类(阅读:没有元素在div有焦点)边界被删除。否则,什么都不会发生。

其他回答

我不完全确定你在追求什么,但这听起来像它可以通过存储输入元素的状态(或div?)作为一个变量来实现:

$('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;
        });
});

CSS:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

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

据我所知,你不能问浏览器屏幕上的任何输入是否有焦点,你必须设置某种焦点跟踪。

我通常有一个名为“noFocus”的变量,并将其设置为true。然后我添加一个焦点事件到所有输入,使noFocus为假。然后我添加了一个模糊事件的所有输入,设置noFocus回真。

我有一个MooTools类可以很容易地处理这个问题,我相信你可以创建一个jquery插件来做同样的事情。

一旦创建,你可以在做任何边界交换之前检查noFocus。

有一个插件可以检查一个元素是否被聚焦:http://plugins.jquery.com/project/focused

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

简单的

 <input type="text" /> 



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

    alert("I am in Focus");

     });
 </script>