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

时间:2008-12-10 00:21:07

标签: javascript jquery focus html-form

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

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

9 个答案:

答案 0 :(得分:59)

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

答案 1 :(得分:17)

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

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

答案 2 :(得分:3)

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

答案 3 :(得分:1)

否则,您可以使用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个输入则可能不太实际:)

答案 4 :(得分:1)

我会这样做:我使用了一个函数,如果它发送的元素的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子句)。

- 汤姆

答案 5 :(得分:1)

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

答案 6 :(得分:0)

尝试

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

答案 7 :(得分:0)

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

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

(也许你应该将selectedInput变量移动到表单。)

答案 8 :(得分:0)

您可以使用此

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

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

豫ICP备18024241号-1