31

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

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

4

9 回答 9

61

document.activeElement，它在IE中已经支持很久了，最新版本的FF和chrome也支持它。如果没有焦点，则返回document.body对象。

于 2010-12-15T22:02:13.187 回答
17

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

var selectedInput = null;
$(function() {
    $('input, textarea, select').focus(function() {
        selectedInput = this;
    }).blur(function(){
        selectedInput = null;
    });
});
于 2008-12-10T01:36:26.530 回答
3

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

于 2008-12-10T00:49:49.713 回答
2

Otherwise, you could use the onfocus and onblur events.

something like:

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

and then have something like this in your javascript

if (txtfocus==1)
{
//Whatever code you want to run
}

if (txtfocus==0)
{
//Something else here
}

But that would just be my way of doing it, and it might not be extremely practical if you have, say 10 inputs :)

于 2011-08-30T16:55:09.793 回答
1

I would do it this way: I used a function that would return a 1 if the ID of the element it was sent was one that would trigger my event, and all others would return a 0, and the "if" statement would then just fall-through and not do anything:

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

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

The first two will do the event in doSomething, the last one won't (or will do the else clause if uncommented).

-Tom

于 2012-05-22T03:07:38.167 回答
1

Here's a solution for text/password/textarea (not sure if I forgot others that can get focus, but they could be easily added by modifying the if clauses... an improvement could be made on the design by putting the if's body in it's own function to determine suitable inputs that can get focus).

Assuming that you can rely on the user sporting a browser that is not pre-historic (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>

For pre-historic browsers, you can use the 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>
于 2012-07-31T18:46:45.373 回答
0

尝试

window.getSelection().getRangeAt(0).startContainer
于 2011-03-21T02:44:02.390 回答
0

You only need one listener if you use event bubbling (and bind it to the document); one per form is reasonable, though:

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

(Maybe you should move the selectedInput variable to the form.)

于 2013-03-26T13:47:56.580 回答
0

You can use this

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

It triggers the function when the input is focused.

于 2015-06-18T13:44:16.093 回答