Определить, какой вход формы сосредоточен с помощью JavaScript или jQuery

Как вы определяете, какой ввод формы сосредоточен с помощью JavaScript или jQuery?

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

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

Вот решение для 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>

Ответ 7

Try

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

Ответ 8

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

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

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

Ответ 9

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

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

Он запускает функцию при фокусировке ввода.