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

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

---

在函数中，我希望能够确定哪个表单输入具有焦点。我希望能够在纯JavaScript和/或jQuery中实现这一点。

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

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

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

---

document.activeElement

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

document.body

对象。

尝试

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

---

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

比如：

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

---

但这只是我的方法，如果你有10个输入，这可能不太实际：）

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

---

-Tom

这里有一个text/password/textarea的解决方案（不确定我是否忘记了其他可以获得焦点的方法，但是可以通过修改if子句轻松添加它们……可以通过将if的主体放在它自己的函数中以确定可以获得焦点的合适输入来改进设计）

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

//获取具有焦点的文本/密码/文本区域输入的选择器是：jQuery（“[data selected=true]”）
jQuery（文档）.ready（函数（）{
jQuery（'body'）.bind（{'focusin'：函数（事件）{
var Target=jQuery（Event.Target）；
if（Target.is（':text'）| | Target.is（':password'）| | Target.is（'textarea'））
{
Target.attr（'data-selected'，'true'）；
}
}“focusout”：函数（事件）{
var Target=jQuery（Event.Target）；
if（Target.is（':text'）| | Target.is（':password'）| | Target.is（'textarea'））
{
Target.attr（'data-selected'，'false'）；
}
}});
});

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

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

//获取具有焦点的文本/密码/文本区域输入的选择器是：jQuery（'[name='+jQuery（'body'）。data（'Selected_input'）+']））
jQuery（文档）.ready（函数（）{
jQuery（'body'）.bind（{'focusin'：函数（事件）{
var Target=jQuery（Event.Target）；
if（Target.is（':text'）| | Target.is（':password'）| | Target.is（'textarea'））
{
jQuery（'body'）.data（'Selected_input'，Target.attr（'name'））；
}
}“focusout”：函数（事件）{
var Target=jQuery（Event.Target）；
if（Target.is（':text'）| | Target.is（':password'）| | Target.is（'textarea'））
{
jQuery（'body'）。数据（'Selected_input'，null）；
}
}});
});

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

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

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

您可以使用此

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

---

当输入被聚焦时，它会触发函数。

$（“#这里的某些id输入[type=text]：focus”）

将用于文本输入。这对我来说根本不起作用-是否有一个新的“：focus”选择器？我说的是CSS选择器，而不是jQuery选择器。对于大型DOM结构来说非常不有效，不支持动态添加元素，链接呢？。很惊讶这是正确的选择answer@Juan门德斯：并不是每件事都必须针对每种情况采取全面的解决方案。信不信由你，大多数时候，你会有<10个输入，没有动态添加的字段，这样就可以了。大多数时候，少于10个输入，没有动态添加？可能是简单的表单，而不是复杂的web应用程序。如果document.activeElement在所有A级浏览器中都可用，为什么要使用更复杂、技术更差的解决方案？另外，如果焦点指向某个链接，这将给你一个假阳性。我只是在警告警察，同意。这可能是一种非常低效的处理方式，但如果你只想知道最后一个文本框/文本区域/下拉列表，而不关心按钮等内容，就很难找到更好的解决方案。你说很难找到更好的解决办法是什么意思？只需检查

document.activeElement

的值。看到我的答案了吗

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

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