Определите, какая форма ввода имеет фокус, используя JavaScript или jQuery

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

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

Предполагая, что вы можете положиться на пользователя, использующего браузер, который не является доисторическим (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 5

Я бы сделал это следующим образом: я использовал функцию, которая возвращала бы 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-разметка:

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

Первые два сделают событие в doSomething, последний - нет (или сделает предложение else, если оно не прокомментировано).

-Tom

Answer 6

В противном случае вы можете использовать события 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 7

Вы можете использовать это

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

Включает функцию, когда вход сфокусирован.

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

Попробуйте

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