Обнаружить, какая форма ввода имеет фокус с помощью JavaScript или JQuery

голоса
30

Как вы определить, какие формы ввода имеет фокус с помощью JavaScript или JQuery?

Изнутри функции Я хочу, чтобы иметь возможность определить, какие формы ввода имеет фокус. Я хотел бы быть в состоянии сделать это в прямом JavaScript и / или JQuery.

Задан 10/12/2008 в 01:21
источник пользователем
На других языках...                            


9 ответов

голоса
59

document.activeElement, Это было поддержано в IE в течение длительного времени и в последние версии FF и поддержки хромированного он также. Если ничего не имеет фокус, он возвращает document.bodyобъект.

Ответил 15/12/2010 в 23:02
источник пользователем

голоса
16

Я не уверен, что это самый эффективный способ, но вы можете попробовать:

var selectedInput = null;
$(function() {
    $('input, textarea, select').focus(function() {
        selectedInput = this;
    }).blur(function(){
        selectedInput = null;
    });
});
Ответил 10/12/2008 в 02:36
источник пользователем

голоса
3

Если все , что вам нужно сделать , это изменить CSS для конкретного поля формы , когда он получает фокус, вы можете использовать CSS «: фокус» селектор. Для совместимости с IE6 , который не поддерживает это, вы могли бы использовать IE7 библиотеку.

Ответил 10/12/2008 в 01:49
источник пользователем

голоса
1

Вот решение для текста / пароля / текстового поля (не уверен, если я забыл другие, которые могут получить фокус, но они могут быть легко добавлены, изменив если положения ... улучшение может быть сделан на дизайн, положив тело, если в это собственная функция, чтобы определить соответствующие входы, которые могут получить фокус).

Предполагая, что вы можете положиться на пользователе спортивного браузер, который не доисторический (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>
Ответил 31/07/2012 в 19:46
источник пользователем

голоса
1

Я хотел бы сделать это следующим образом: Я использовал функцию, которая будет возвращать 1, если идентификатор элемента он был послан был один, что вызвало бы мое событие, а все остальные будут возвращать 0, а «если» заявление будет тогда только осень-конца и ничего не делать:

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)" />

Первые два будут делать это событие в DoSomething, последний не будет (или будет делать оговорку еще, если раскомментировать).

-Том

Ответил 22/05/2012 в 04:07
источник пользователем

голоса
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 входов :)

Ответил 30/08/2011 в 17:55
источник пользователем

голоса
0

Вы можете использовать эту функцию

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

Это вызывает функцию, когда вход сфокусирован.

Ответил 18/06/2015 в 13:44
источник пользователем

голоса
0

Вам нужно только один слушатель, если вы используете событие кипящего (и привязать его к документу); один в форме разумно, хотя:

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

(Может быть, вы должны переместить переменную selectedInput в форму.)

Ответил 26/03/2013 в 14:47
источник пользователем

голоса
0

Пытаться

window.getSelection().getRangeAt(0).startContainer
Ответил 21/03/2011 в 03:44
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more