首页 文章

使用jQuery测试输入是否具有焦点

提问于
浏览
515

在我正在构建的站点的首页上,有几个 <div> 使用CSS :hover 伪类在鼠标悬停时添加边框 . 其中一个 <div> 包含一个 <form> ,使用jQuery,如果其中的输入具有焦点,它将保持边界 . 这完全有效,除了IE6不支持 <a> 以外的任何元素 :hover . 所以,对于这个浏览器,我们只使用jQuery来模拟使用 $(#element).hover() 方法的CSS :hover . 唯一的问题是,现在jQuery处理形式 focus()hover() ,当输入具有焦点然后用户移入和移出鼠标时,边框消失 .

我以为我们可以使用某种条件来阻止这种行为 . 例如,如果我们测试鼠标输出是否有任何输入有焦点,我们可以阻止边界消失 . AFAIK,jQuery中没有 :focus 选择器,所以我不确定如何实现这一点 . 有任何想法吗?

15 回答

  • 0

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

    我通常有一个名为“noFocus”的变量并将其设置为true . 然后我将焦点事件添加到使noFocus为false的所有输入 . 然后我向所有将noFocus设置为true的输入添加模糊事件 .

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

    创建完成后,您可以在进行任何边框交换之前检查noFocus .

  • 869

    我不完全确定你所追求的是什么,但这听起来可以通过将输入元素(或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;
            });
    });
    
  • -1

    跟踪两个状态(悬停,聚焦)为真/假标志,每当更改时,运行一个函数,如果两者都为假,则删除边框,否则显示边框 .

    所以:onfocus设置focus = true,onblur设置focus = false . onmouseover sets hovered = true,onmouseout sets hovered = false . 在每个事件之后运行一个添加/删除边框的函数 .

  • 0

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

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

    因此,如果它没有该类(读取:div中没有元素具有焦点),则删除边框 . 否则,没有任何反应 .

  • 0

    2015年4月更新

    由于这个问题已经存在了一段时间,并且一些新的约定已经发挥作用,我觉得我应该提到 .live 方法已被折旧 .

    取而代之的是,现在已经引入了 .on 方法 .

    他们的documentation在解释它是如何工作方面非常有用;

    .on()方法将事件处理程序附加到jQuery对象中当前选定的元素集 . 从jQuery 1.7开始,.on()方法提供了附加事件处理程序所需的所有功能 . 有关从旧的jQuery事件方法转换的帮助,请参阅.bind(),. delegate()和.live() .

    因此,为了使您能够定位“输入聚焦”事件,您可以在脚本中使用它 . 就像是:

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

    这非常强大,甚至允许您使用TAB键 .

  • 0

    没有:焦点,但有:选择http://docs.jquery.com/Selectors/selected

    但是如果你想根据选择的内容改变事物的外观,你可能应该使用模糊事件 .

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

  • 1

    jQuery 1.6

    jQuery添加了一个:focus选择器,因此我们不再需要自己添加它 . 只需使用 $("..").is(":focus")

    jQuery 1.5及以下版本

    Edit: 随着时代的变迁,我们找到了更好的测试焦点的方法,新的最爱是this gist from Ben Alman

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

    引自Mathias Bynens here

    请注意,添加了(elem.type || elem.href)测试以过滤掉像body这样的误报 . 这样,我们确保过滤掉除表单控件和超链接之外的所有元素 .

    你正在定义一个新的选择器 . 见Plugins/Authoring . 然后你可以这样做:

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

    要么:

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

    任何jQuery

    如果你只是想弄清楚哪个元素有焦点,你可以使用

    $(document.activeElement)
    

    如果您不确定版本是否为1.6或更低版本,则可以添加 :focus 选择器(如果缺少):

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

    使用类来标记元素状态的替代方法是内部data store functionality .

    P.S . :您可以使用 data() 函数存储布尔值和任何您想要的值 . 它不只是关于字符串:)

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

    然后,这只是访问元素状态的问题 .

  • 0

    CSS:

    .focus {
        border-color:red;
    }
    

    JQuery的:

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

    你有没有想过使用mouseOver和mouseOut来模拟这个 . 另请参阅mouseEnter和mouseLeave

  • 15

    如果有人关心现在有一个更好的方法来捕捉焦点, $(foo).focus(...)

    http://api.jquery.com/focus/

  • 0

    我有一个.live(“焦点”)事件设置为选择()(突出显示)文本输入的内容,以便用户在键入之前不必选择它新 Value .

    $(formObj) . 选择();

    由于不同浏览器之间的怪癖,选择有时会被导致它的点击所取代,并且它会在有利于将光标置于文本字段之后取消选择内容(在FF中工作大部分都正常但在IE中失败)

    我想我可以通过稍微延迟选择来解决这个问题......

    的setTimeout(函数(){$(formObj) . 选择();},200);

    这样工作正常并且选择会持续存在,但是出现了一个有趣的问题 . 如果您从一个字段切换到下一个字段,焦点将在选择发生之前切换到下一个字段 . 由于选择抢断焦点,焦点将返回并触发新的“焦点”事件 . 这最终导致一系列输入选择在整个屏幕上跳舞 .

    一个可行的解决方案是在执行select()之前检查该字段是否仍然具有焦点,但如上所述,没有简单的方法可以检查......我最终只是放弃了整个自动亮点,而不是转向应该是什么一个jQuery select()调用一个充满子程序的巨大函数...

  • 1

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

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

    简单

    <input type="text" /> 
    
    
    
     <script>
         $("input").focusin(function() {
    
        alert("I am in Focus");
    
         });
     </script>
    
  • 19

    这是一个比目前接受的答案更强大的答案:

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

    请注意,添加了 (elem.type || elem.href) 测试以过滤掉 body 之类的误报 . 这样,我们确保过滤掉除表单控件和超链接之外的所有元素 .

    (摘自this gistBen Alman . )

相关问题