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

JavaScript

宝儿A

2020-03-12

在我正在构建的网站的首页上,有几个<div>使用CSS :hover伪类在鼠标悬停在它们上方时添加边框。的其中一个<div>包含<form>,如果其中的输入具有焦点,则使用jQuery使用jQuery保留边框。除了IE6不支持s :hover之外<a>任何其他元素,这都可以正常工作因此,仅对于此浏览器,我们使用jQuery :hover使用该$(#element).hover()方法来模仿CSS 唯一的问题是,现在jQuery同时处理了form focus() hover(),当输入具有焦点时,用户将鼠标移入和移出,边框就会消失。

我当时以为我们可以使用某种条件阻止这种行为。例如,如果我们在鼠标移出时测试了任何输入是否具有焦点,则可以阻止边框消失。AFAIK,:focusjQuery中没有选择器,所以我不确定如何实现。有任何想法吗?

第1027篇《使用jQuery测试输入是否具有焦点》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
前端MandyJinJin 2020.03.12

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

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

因此,如果没有该类(请参阅:div中的任何元素都没有焦点),则边框将被移除。否则,什么也不会发生。

SamStafan十三 2020.03.12

简单

 <input type="text" /> 



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

    alert("I am in Focus");

     });
 </script>
达蒙小胖 2020.03.12

我将.live(“ focus”)事件设置为select()(突出显示)文本输入的内容,以便用户在键入新值之前不必选择它。

$(formObj).select();

由于不同浏览器之间存在怪癖,选择有时会被引起选择的点击所取代,并且会在选择后立即取消选择内容,而是将光标放在文本字段中(在FF中通常可以,但在IE中失败)

我以为我可以通过在选择上稍加延迟来解决此问题...

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

这可以很好地工作,并且选择将继续存在,但是会出现一个有趣的问题。.如果从一个字段切换到另一个字段,则在进行选择之前,焦点将切换到下一个字段。由于select会失去焦点,因此焦点将返回并触发新的“焦点”事件。最终,输入级联选择整个屏幕上的跳舞。

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

斯丁Jim 2020.03.12

跟踪两个状态(悬停,集中)为true / false标志,每当状态更改时,运行一个函数,如果两个均为false,则删除border,否则显示border。

因此:onfocus集focused = true,onblur集focused = false。onmouseover设置为hovered = true,onmouseout设置为hovered = false。在这些事件中的每一个之后,运行添加/删除边框的函数。

小胖Itachi西里 2020.03.12

您是否考虑过使用mouseOvermouseOut进行模拟。同时查看mouseEntermouseLeave

Stafan飞云Sam 2020.03.12

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

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

我有一个MooTools类,可以很轻松地处理此问题,我敢肯定您可以创建一个jquery插件来执行此操作。

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

null 2020.03.12

没有:focus,但是有:selected http://docs.jquery.com/Selectors/selected

但是,如果您要根据所选内容更改外观,则可能应该使用模糊事件。

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

GilL 2020.03.12

如果有人在乎,现在有更好的方法来吸引焦点, $(foo).focus(...)

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

Tony西门古一 2020.03.12

使用类标记元素状态的一种替代方法是内部数据存储功能

PS:您可以使用该data()函数存储布尔值和任何所需内容这不仅仅是关于字符串:)

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

然后,只需访问元素的状态即可。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android