在我正在构建的站点的首页上,有几个 <div>
使用CSS :hover
伪类在鼠标悬停时添加边框 . 其中一个 <div>
包含一个 <form>
,使用jQuery,如果其中的输入具有焦点,它将保持边界 . 这完全有效,除了IE6不支持 <a>
以外的任何元素 :hover
. 所以,对于这个浏览器,我们只使用jQuery来模拟使用 $(#element).hover()
方法的CSS :hover
. 唯一的问题是,现在jQuery处理形式 focus()
和 hover()
,当输入具有焦点然后用户移入和移出鼠标时,边框消失 .
我以为我们可以使用某种条件来阻止这种行为 . 例如,如果我们测试鼠标输出是否有任何输入有焦点,我们可以阻止边界消失 . AFAIK,jQuery中没有 :focus
选择器,所以我不确定如何实现这一点 . 有任何想法吗?
15 回答
据我所知,你不能问浏览器屏幕上的任何输入是否有焦点,你必须设置某种焦点跟踪 .
我通常有一个名为“noFocus”的变量并将其设置为true . 然后我将焦点事件添加到使noFocus为false的所有输入 . 然后我向所有将noFocus设置为true的输入添加模糊事件 .
我有一个很容易处理这个问题的MooTools类,我相信你可以创建一个jquery插件来做同样的事情 .
创建完成后,您可以在进行任何边框交换之前检查noFocus .
我不完全确定你所追求的是什么,但这听起来可以通过将输入元素(或div?)的状态存储为变量来实现:
跟踪两个状态(悬停,聚焦)为真/假标志,每当更改时,运行一个函数,如果两者都为假,则删除边框,否则显示边框 .
所以:onfocus设置focus = true,onblur设置focus = false . onmouseover sets hovered = true,onmouseout sets hovered = false . 在每个事件之后运行一个添加/删除边框的函数 .
我最后要做的是创建一个名为.elementhasfocus的任意类,它在jQuery focus()函数中添加和删除 . 当hover()函数在鼠标输出时运行时,它会检查.elementhasfocus:
因此,如果它没有该类(读取:div中没有元素具有焦点),则删除边框 . 否则,没有任何反应 .
2015年4月更新
由于这个问题已经存在了一段时间,并且一些新的约定已经发挥作用,我觉得我应该提到
.live
方法已被折旧 .取而代之的是,现在已经引入了
.on
方法 .他们的documentation在解释它是如何工作方面非常有用;
因此,为了使您能够定位“输入聚焦”事件,您可以在脚本中使用它 . 就像是:
这非常强大,甚至允许您使用TAB键 .
没有:焦点,但有:选择http://docs.jquery.com/Selectors/selected
但是如果你想根据选择的内容改变事物的外观,你可能应该使用模糊事件 .
http://docs.jquery.com/Events/blur
jQuery 1.6
jQuery添加了一个:focus选择器,因此我们不再需要自己添加它 . 只需使用
$("..").is(":focus")
jQuery 1.5及以下版本
Edit: 随着时代的变迁,我们找到了更好的测试焦点的方法,新的最爱是this gist from Ben Alman:
引自Mathias Bynens here:
你正在定义一个新的选择器 . 见Plugins/Authoring . 然后你可以这样做:
要么:
任何jQuery
如果你只是想弄清楚哪个元素有焦点,你可以使用
如果您不确定版本是否为1.6或更低版本,则可以添加
:focus
选择器(如果缺少):使用类来标记元素状态的替代方法是内部data store functionality .
P.S . :您可以使用
data()
函数存储布尔值和任何您想要的值 . 它不只是关于字符串:)然后,这只是访问元素状态的问题 .
CSS:
JQuery的:
你有没有想过使用mouseOver和mouseOut来模拟这个 . 另请参阅mouseEnter和mouseLeave
如果有人关心现在有一个更好的方法来捕捉焦点,
$(foo).focus(...)
http://api.jquery.com/focus/
我有一个.live(“焦点”)事件设置为选择()(突出显示)文本输入的内容,以便用户在键入之前不必选择它新 Value .
$(formObj) . 选择();
由于不同浏览器之间的怪癖,选择有时会被导致它的点击所取代,并且它会在有利于将光标置于文本字段之后取消选择内容(在FF中工作大部分都正常但在IE中失败)
我想我可以通过稍微延迟选择来解决这个问题......
的setTimeout(函数(){$(formObj) . 选择();},200);
这样工作正常并且选择会持续存在,但是出现了一个有趣的问题 . 如果您从一个字段切换到下一个字段,焦点将在选择发生之前切换到下一个字段 . 由于选择抢断焦点,焦点将返回并触发新的“焦点”事件 . 这最终导致一系列输入选择在整个屏幕上跳舞 .
一个可行的解决方案是在执行select()之前检查该字段是否仍然具有焦点,但如上所述,没有简单的方法可以检查......我最终只是放弃了整个自动亮点,而不是转向应该是什么一个jQuery select()调用一个充满子程序的巨大函数...
有一个插件可以检查元素是否聚焦:http://plugins.jquery.com/project/focused
简单
这是一个比目前接受的答案更强大的答案:
请注意,添加了
(elem.type || elem.href)
测试以过滤掉body
之类的误报 . 这样,我们确保过滤掉除表单控件和超链接之外的所有元素 .(摘自this gist,Ben Alman . )