Détectez quel champ de formulaire a le focus en utilisant JavaScript ou jQuery

Question

Comment détecter le champ de formulaire qui a le focus en utilisant JavaScript ou jQuery?

À partir d'une fonction, je veux être capable de déterminer quel champ de formulaire a le focus. Je voudrais pouvoir le faire en JavaScript pur et/ou en jQuery.

Answer 1

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

Answer 2

Je ne suis pas sûr que ce soit la manière la plus efficace, mais vous pouvez essayer :

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

Answer 3

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

Answer 4

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

quelque chose comme :

et ensuite avoir quelque chose comme ceci dans votre javascript

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

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

Mais cela ne serait que ma façon de le faire, et cela pourrait ne pas être extrêmement pratique si vous avez, disons, 10 entrées :)

Answer 5

Je le ferais de cette façon : j'ai utilisé une fonction qui retournerait un 1 si l'ID de l'élément envoyé déclenchait mon événement, et tous les autres retourneraient un 0, et l'instruction "if" ne ferait alors rien :

function getSender(field) {
    switch (field.id) {
        case "someID":
        case "someOtherID":
            return 1;
        break;
        default:
            return 0;
    }
}

function doSomething(elem) {
    if (getSender(elem) == 1) {
       // faire quelque chose
    }
  /*  else {
       // faire quelque chose d'autre
    }  */
}

Marquage HTML :

Les deux premiers déclencheront l'événement doSomething, le dernier ne le fera pas (ou exécutera la clause else si décommentée).

- Tom