Question

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

在函数中，我希望能够确定哪个表单输入具有焦点。我希望能够在直接的JavaScript和/或jQuery中执行此操作。

Answer 1

document.activeElement，它在IE中得到了很长时间的支持，最新版本的FF和Chrome也支持它。如果没有焦点，则返回document.body对象。

Answer 2

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

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

Answer 3

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

Answer 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个输入则可能不太实际：）

Answer 5

我会这样做：我使用了一个函数，如果它发送的元素的ID是一个会触发我的事件的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子句）。

- 汤姆

Answer 6

这是text / password / textarea的解决方案（不确定我是否忘记了可以获得焦点的其他人，但是可以通过修改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>

对于史前浏览器，您可以使用丑陋的话：

        <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>

Answer 7

尝试

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

Answer 8

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

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

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

Answer 9

您可以使用此

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

当输入被聚焦时，它会触发该功能。

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

9 个答案: