web-dev-qa-db-fra.com

Détecter quelle entrée de formulaire a le focus en utilisant JavaScript ou jQuery

Comment détecter quelle entrée de formulaire a le focus en utilisant JavaScript ou jQuery?

Dans une fonction, je veux pouvoir déterminer quelle entrée de formulaire est active. J'aimerais pouvoir le faire en JavaScript et/ou jQuery.

javascriptjqueryfocushtml-form
30
Everett Toews

Je ne suis pas sûr que ce soit le moyen le plus efficace, mais vous pouvez essayer:

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

document.activeElement, il est supporté depuis longtemps dans IE et les dernières versions de FF et de chrome le supportent également. Si rien n'a le focus, il retourne l'objet document.body.

59
Juan Mendes

Si tout ce que vous voulez, c'est changer le CSS pour un champ de formulaire particulier lorsqu'il devient actif, vous pouvez utiliser le sélecteur CSS: "focus". Pour une compatibilité avec IE6 qui ne le supporte pas, vous pouvez utiliser la bibliothèque IE7 .

3
Marc Novakowski

Sinon, vous pourriez utiliser les événements onfocus et onblur.

quelque chose comme:

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

et puis avoir quelque chose comme ça dans votre javascript

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

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

Mais ce serait juste ma façon de le faire, et ce ne serait peut-être pas très pratique si vous avez, disons 10 entrées :)

1
Maxime Kjaer

Je le ferais de cette façon: j'ai utilisé une fonction qui renverrait un 1 si l'ID de l'élément envoyé en était un qui déclencherait mon événement, et tous les autres renverraient un 0, et la déclaration "if" serait alors juste tomber à travers et ne rien faire:

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
    }  */
}

Balise HTML:

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

Les deux premiers feront l'événement dans doSomething, le dernier ne le fera pas (ou fera la clause else s'il n'est pas commenté).

-À M

1
vapcguy

Voici une solution pour text/password/textarea (je ne sais pas si j’en ai oublié d’autres qui peuvent faire l’objet d’un focus, mais ils pourraient facilement être ajoutés en modifiant les clauses if ... une amélioration pourrait être apportée à la conception en y insérant le corps de if propre fonction pour déterminer les entrées appropriées pouvant obtenir la mise au point).

En supposant que vous puissiez compter sur l'utilisateur utilisant un navigateur qui n'est pas pré-historique (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>

Pour les navigateurs préhistoriques, vous pouvez utiliser le plus laid:

        <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>
1
Magnitus

Essayer

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

Vous n'avez besoin que d'un seul auditeur si vous utilisez event bubbling (et le liez au document) un par formulaire est raisonnable, cependant:

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

(Peut-être devriez-vous déplacer la variable selectedInput vers le formulaire.)

0
user2211815

Vous pouvez utiliser ceci

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

Il déclenche la fonction lorsque l'entrée est focalisée.

0
Kevin Cohen