使用 JavaScript 或 jQuery 检测哪个表单输入具有焦点

Posted 2023-05-09

【中文标题】使用 JavaScript 或 jQuery 检测哪个表单输入具有焦点

【英文标题】：Detect which form input has focus using JavaScript or jQuery

【发布时间】：2010-09-26 03:57:50

【问题描述】：

如何？

在一个函数中，我希望能够确定哪个表单输入具有焦点。我希望能够在直接的 javascript 和/或 jQuery 中做到这一点。

【参考方案1】：

document.activeElement，IE早就支持了，最新版本的FF和chrome也支持了。如果没有焦点，则返回 document.body 对象。

【参考方案2】：

我不确定这是否是最有效的方法，但您可以尝试：

var selectedInput = null;
$(function() 
    $('input, textarea, select').focus(function() 
        selectedInput = this;
    ).blur(function()
        selectedInput = null;
    );
);

【讨论】：

对于大型DOM结构非常不友好，不支持动态添加元素，链接呢？很惊讶这被选为正确答案

@Juan Mendes：并非所有事情都必须是针对每种情况的全面解决方案。信不信由你，大多数时候你会有

大多数时候，少于 10 个输入而不是动态添加它们？也许是简单的表单，而不是复杂的网络应用程序。如果 document.activeElement 在所有 A 级浏览器中都可用，您为什么要使用更复杂且技术较差的解决方案？此外，如果焦点转到一个链接，这会给你一个误报。我只是在警告 OP。

同意。可能是一种非常低效的做事方式，但如果您只想知道最后一个带有焦点的文本框/文本区域/下拉菜单并且您不关心按钮等内容，则很难找到更好的解决方案。

@Chaos。你的意思是很难找到更好的解决方案？只需检查document.activeElement 的值。看我的回答

【参考方案3】：

如果您只想在获得焦点时更改特定表单字段的 CSS，您可以使用 CSS ":focus" 选择器。为了与不支持此功能的 IE6 兼容，您可以使用 IE7 库。

【讨论】：

$('#some_id_here input[type=text]:focus') 将适用于文本输入。

这对我来说根本不起作用 - 有没有新的 ":focus" 选择器？

我说的是 CSS 选择器，而不是 jQuery 选择器。

【参考方案4】：

否则，您可以使用 onfocus 和 onblur 事件。

类似：

<input type="text" onfocus="txtfocus=1" onblur="txtfocus=0" />

然后在你的 javascript 中有这样的东西

if (txtfocus==1)

//Whatever code you want to run


if (txtfocus==0)

//Something else here

但这只是我的做法，如果你有 10 个输入，这可能不是非常实用 :)

【参考方案5】：

我会这样做：我使用了一个函数，如果它发送的元素的 ID 是会触发我的事件的元素，则返回 1，而所有其他元素将返回 0，以及“if”语句然后就会失败而不做任何事情：

function getSender(field) 
    switch (field.id) 
        case "someID":
        case "someOtherID":
            return 1;
        break;
        default:
            return 0;
    


function doSomething(elem) 
    if (getSender(elem) == 1) 
       // do your stuff
    
  /*  else 
       // do something else
      */

html 标记：

<input id="someID" onfocus="doSomething(this)" />
<input id="someOtherID" onfocus="doSomething(this)" />
<input id="someOtherGodForsakenID" onfocus="doSomething(this)" />

前两个将在 doSomething 中执行该事件，最后一个不会（如果未注释，则将执行 else 子句）。

-汤姆

【参考方案6】：

这是文本/密码/文本区域的解决方案（不确定我是否忘记了其他可以获得焦点的内容，但可以通过修改 if 子句轻松添加它们......可以通过放置 if 来改进设计body 在它自己的函数中确定可以获得焦点的合适输入）。

假设您可以依赖使用非史前浏览器的用户 (http://www.caniuse.com/#feat=dataset)：

        <script>
        //The selector to get the text/password/textarea input that has focus is: jQuery('[data-selected=true]')
        jQuery(document).ready(function() 
            jQuery('body').bind('focusin': function(Event)
                var Target = jQuery(Event.target);
                if(Target.is(':text')||Target.is(':password')||Target.is('textarea'))
                
                    Target.attr('data-selected', 'true');
                
            , 'focusout': function(Event)
                var Target = jQuery(Event.target);
                if(Target.is(':text')||Target.is(':password')||Target.is('textarea'))
                
                    Target.attr('data-selected', 'false');
                
            );
        );
    </script>

对于史前浏览器，可以使用uglier：

        <script>
        //The selector to get the text/password/textarea input that has focus is: jQuery('[name='+jQuery('body').data('Selected_input')+']')
        jQuery(document).ready(function() 
            jQuery('body').bind('focusin': function(Event)
                var Target = jQuery(Event.target);
                if(Target.is(':text')||Target.is(':password')||target.is('textarea'))
                
                    jQuery('body').data('Selected_input', Target.attr('name'));
                
            , 'focusout': function(Event)
                var Target = jQuery(Event.target);
                if(Target.is(':text')||Target.is(':password')||target.is('textarea'))
                
                    jQuery('body').data('Selected_input', null);
                
            );
        );
    </script>

【参考方案7】：

试试

window.getSelection().getRangeAt(0).startContainer

【参考方案8】：

如果您使用事件冒泡（并将其绑定到文档），则只需要一个侦听器；不过，每种形式一个是合理的：

var selectedInput = null;
$(function() 
    $('form').on('focus', 'input, textarea, select', function() 
        selectedInput = this;
     ).on('blur', 'input, textarea, select', function() 
        selectedInput = null;
    );
);

（也许您应该将 selectedInput 变量移动到表单中。）

【参考方案9】：

你可以用这个

<input type="text" onfocus="myFunction()">

当输入有焦点时触发该函数。