Detectar que a entrada de formulário tem o foco usando JavaScript ou jQuery

votos
30

Como você detectar que a entrada de formulário tem o foco usando JavaScript ou jQuery?

De dentro de uma função que eu quero ser capaz de determinar qual a entrada de formulário tem o foco. Eu gostaria de ser capaz de fazer isso em linha reta JavaScript e / ou jQuery.

Publicado 10/12/2008 em 01:21
fonte usuário
Em outras línguas...                            


9 respostas

votos
59

document.activeElement, Tem sido suportado no IE por um longo tempo e as últimas versões de FF e apoio cromo também. Se nada tiver foco, ele retorna o document.bodyobjeto.

Respondeu 15/12/2010 em 23:02
fonte usuário

votos
16

Não tenho a certeza se esta é a maneira mais eficiente, mas você pode tentar:

var selectedInput = null;
$(function() {
    $('input, textarea, select').focus(function() {
        selectedInput = this;
    }).blur(function(){
        selectedInput = null;
    });
});
Respondeu 10/12/2008 em 02:36
fonte usuário

votos
3

Se tudo que você quer fazer é mudar o CSS para um campo de forma particular quando se obtém o foco, você poderia usar o CSS ": foco" selector. Para compatibilidade com o IE6 que não suporta isso, você poderia usar o IE7 biblioteca.

Respondeu 10/12/2008 em 01:49
fonte usuário

votos
1

Aqui está uma solução para text / senha / textarea (não tenho certeza se eu esquecer outros que podem obter o foco, mas eles poderiam ser facilmente adicionados ao modificar a se cláusulas ... uma melhoria poderia ser feita no projeto, colocando o corpo do caso em que é própria função para determinar entradas adequadas que podem obter o foco).

Supondo que você pode contar com o usuário ostentando um navegador que não é pré-histórico (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>

Para navegadores pré-históricos, você pode usar o mais feio:

        <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>
Respondeu 31/07/2012 em 19:46
fonte usuário

votos
1

Gostaria de fazê-lo desta maneira: Eu usei uma função que voltaria a 1 se o ID do elemento que foi enviado foi um que provocaria meu evento, e todos os outros voltariam a 0, eo "if", em seguida, seria apenas cair por ele e não fazer nada:

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

Os dois primeiros vão fazer o evento em doSomething, o último não vai (ou fará a cláusula else if descomentada).

-Tom

Respondeu 22/05/2012 em 04:07
fonte usuário

votos
1

Caso contrário, você poderia usar o onfocus e onblur.

algo como:

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

e depois ter algo parecido com isso no seu javascript

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

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

Mas isso seria apenas a minha maneira de fazê-lo, e ele pode não ser muito prático se você tem, digamos, 10 entradas :)

Respondeu 30/08/2011 em 17:55
fonte usuário

votos
0

Você pode usar este

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

Ele aciona a função quando a entrada é focado.

Respondeu 18/06/2015 em 13:44
fonte usuário

votos
0

Você só precisa de um ouvinte se você usar subida do evento (e vinculá-lo ao documento); um por forma é razoável, no entanto:

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

(Talvez você deve mover a variável selectedInput ao formulário.)

Respondeu 26/03/2013 em 14:47
fonte usuário

votos
0

Experimentar

window.getSelection().getRangeAt(0).startContainer
Respondeu 21/03/2011 em 03:44
fonte usuário

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