2009-03-10 10 views
1

J'essaie d'implémenter un filigrane simple sur une zone de texte qui disparaît lorsque la zone de texte obtient le focus. J'ai trouvé ce plugin jQuery qui semblait fonctionner à merveille:Événements Javascript ne bouillonnant pas lors de l'utilisation de la zone de texte Filigrane

http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Le filigrane travaillé comme annoncé avec ce code:

<script type="text/javascript" src="/includes/_jQuery/_Library/jquery-1.3.1.min.js"></script> 
<script type="text/javascript" src="/includes/_jQuery/_plugs/_hint/jquery.hint.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("input[title!=]").hint(); 
    }); 
</script> 

<table> 
    <tr> 
     <td><input type="text" title="Blah" /></td> 
    </tr> 
</table> 

Cependant, lors de l'ajout d'une alerte à l'événement clic de la table , J'ai trouvé que l'événement ne fait pas de bulles lorsque vous cliquez sur la partie de la zone de texte qui contient du texte. Cependant, il se ferme très bien lorsque vous cliquez sur la partie de la zone de texte sans texte. Voici le code jQuery que j'ai utilisé pour créer l'alerte:

 $("table").click(function() { 
      alert("blah"); 
     }); 

Est-ce que quelqu'un a une idée pourquoi l'événement ne pas la bulle lorsqu'une partie de la zone de texte est cliqué, mais pas l'autre?

Répondre

1

Est-ce que quelqu'un a une idée pourquoi l'événement ne bouillonne pas quand une partie de la zone de texte est cliqué

Il semble être un bug spécifique à Firefox qui affecte les deux entrées de texte et textareas. Vous pouvez le reproduire avec seulement quelques lignes de code, ce n'est pas lié jQuery ou faire avec le plug-in:

<form onclick="alert('hello')"> 
    <input type="text" value="hello!" onfocus="this.value=''"> 
</form> 

(Bien que je pense que le plug-in a quelques problèmes assez importants Il oublie d'utiliser « var. 'sur les variables locales, en les laissant s'échapper à l'échelle globale.Cela fait échouer plusieurs éléments' .blur 'sur la même page.Plus les valeurs' vides 'seront toujours soumises au formulaire comme chaîne de titre, et vous ne pouvez pas distinguer Les valeurs 'réelles' saisies par l'utilisateur correspondent à la chaîne de titre.)

L'événement échoue uniquement lorsque la valeur de l'entrée est modifiée dans l'événement de mise au point. De manière spéculative, je suppose que Firefox reconnaît en interne que le click() s'est produit sur le texte à l'intérieur de l'entrée, et s'attendant à lancer cet événement sur chacun des ancêtres du texte. Mais lorsque l'événement click sur le parent immédiat déclenche onfocus, cette fonction supprime le texte de son parent. Maintenant, il n'y a rien pour que l'événement click se soit produit, pas de chaîne parentale à traverser.

+0

Merci pour votre réponse! Le bug est aussi dans Safari et Chrome, mais c'est une théorie intéressante. Je verrai si je peux trouver un moyen de contourner cela. –

+0

Hmm, tu as raison! Intéressant, il n'y a pas beaucoup de cas où IE a raison mais Mozilla et Webkit échouent! FWIW pas un tel bug sur Opera. – bobince

+0

Haha, je pensais la même chose. J'ai été en mesure de le faire fonctionner en mettant un délai de 150 millisecondes avant de supprimer le texte, ce qui a permis au bouillonnement de se produire avant que le texte soit supprimé. Pas vraiment élégant, mais ça marche. Si vous pouvez penser à un travail plus élégant, s'il vous plaît faites le moi savoir. –

Questions connexes