2010-06-24 5 views
8

Ainsi, sur une page spécifique, j'ai un certain nombre d'éléments de formulaire, entre 3 et 8, selon l'utilisateur et son action sur la page.Ajouter un onBlur à tous les éléments de formulaire

Comment ajouter dynamiquement un événement onblur spécifique à tous les éléments de formulaire sur la page?

Si j'ai:

function doThisOnBlur() { stuff } 

Comment puis-je ajouter que même fonction à toutes ces fois la page se charge. Aucun élément n'est créé après le chargement de la page mais des éléments différents peuvent apparaître pour différents utilisateurs.

<input type="text" id="x"> 
<input type="text" id="y"> 
<select id="z">...</select> 

Est-ce possible?

+0

Spécifique à chaque élément? A la volée comme dans les éléments créés dynamiquement? – Matt

Répondre

14

Edit: Pour la question mise à jour
Utilisez .blur() et une fonction anonyme pour cette (peu importe combien d'éléments il y a):

$(":input").blur(function() { 
    //do stuff 
}); 

Si vous devez lier certaines fonctions à certains domaines , utilisez des classes ou un attribute selector sur le nom, n'importe quoi pour les distinguer ... si le sélecteur ne trouve pas d'élément, il ne liera tout simplement pas un gestionnaire d'événement à quelque chose. De cette façon, le même code global fonctionne pour tous les utilisateurs, même s'ils ne voient que certains des éléments de formulaire disponibles.


Pour la question originale: si des éléments ont été ajoutés dynamiquement après chargement de la page.
Je pense que .live() pour capturer l'événement blur est ce que vous êtes après ici, en utilisant :input comme sélecteur:

$(":input").live('blur', function() { 
    //do stuff 
}); 
+0

ou '$ (": input "). Blur (function() {..});' Live surveille la page pour les futurs éléments, ce qui n'est pas vraiment nécessaire s'il n'ajoute pas d'éléments après le chargement de la page. Les deux vont travailler cependant. –

+0

@Jim - La question a été éditée pour clarifier après avoir posté cette réponse, je vais mettre à jour pour inclure son édition. –

7

Sans jQuery:

function doThisOnBlur(){ 
// your fancy code 
} 

var inputs = document.getElementsByTagName('input'); 
var selects = document.getElementsByTagName('select'); 

for (var i = 0; i < inputs.length; i++) 
    inputs[i].onblur = doThisOnBlur; 
for (var i = 0; i < selects.length; i++) 
    selects[i].onblur = doThisOnBlur; 

je l'ai fait le plus simple que je pouvais. Je refactoriser cela et ne pas assigner des gestionnaires d'événements de cette façon, mais j'ai pointé pour répondre à votre question.

+0

Comment cela fonctionne pour les éléments ajoutés dynamiquement? :) –

+0

si vous voulez Liaison dynamique d'éléments alors j'utiliserais jQuery: en direct pour faire cela, ils ont à peu près cette fonctionnalité à un tee-shirt! – RobertPitt

+0

Je ne sais pas pourquoi j'ai écrit cela, je devrais vérifier votre nom et réaliser que vous avez posté une réponse pas une question:/désolé – RobertPitt

Questions connexes