2010-11-24 9 views
0

J'ai un usernam Fied ayant une valeur = 'Your Name' Après validation de cette échoue, il devient: 'Enter Your Name'comment écrire un événement onfocus dans jquery

Mais je veux que quand je clique sur ce champ ou onfocus cette 'Enter Your Name' s'annule avec empty string.

Comment écrire sur un événement de mise au point dans jquery?

Répondre

1
$field.bind('focus.emptyfield', function() { 
    if ($(this).val() == 'Enter your name') { 
    $(this).val(''); 
    } 
} 

en supposant champ $ est votre référence jQuery à votre champ de saisie

note: entre onclick et onfocus, ce dernier est le meilleur événement pour gérer, car il est dispositif indépendant

note2 : les événements toujours utiliser un espace de nommage (ainsi vous pourriez la sécurité les délie plus tard)

+0

Il n'est pas très facile d'avoir la valeur par défaut dans votre JavaScript comme ça, surtout quand il pourrait être dans le code HTML. Simplement [utilisez l'attribut HTML5 'placeholder' standard et réutilisez cette valeur pour les navigateurs qui ne supportent pas encore nativement @ @ placeholder] (http://stackoverflow.com/questions/4265331/how-to-write-a -confocus-event-in-jquery/4265393 # 4265393). –

+0

Comme il n'a pas spécifié le doctype, vous ne pouvez pas supposer qu'il utilise html5. AFAIK il pourrait utiliser html4. cette solution est générale et est simplement la réponse à sa dernière question –

+0

Les navigateurs ne se soucient pas vraiment du DOCTYPE. Vous pouvez avoir un DOCTYPE HTML4 et toujours utiliser '@ placeholder'. Bien sûr, le code HTML ne sera pas validé, mais il fonctionnera exactement comme avec un DOCTYPE HTML5. Je ne suppose pas qu'il utilise HTML5; Je dis qu'il devrait. –

2

Qu'est-ce que vous cherchez a été standardisé en HTML5 comme the placeholder attribute. Vous devriez l'utiliser, puis utiliser JavaScript pour recréer cette fonctionnalité pour les navigateurs qui ne le supportent pas encore.

Il suffit d'écrire votre code HTML comme ceci:

<input type="text" name="username" placeholder="Enter your name"> 

Il fonctionnera automatiquement dans les navigateurs modernes, pas JavaScript requis!

Si vous souhaitez prendre en charge les navigateurs plus anciens, n'hésitez pas à utiliser mon Placeholder jQuery plugin, ce qui rendra automatiquement le HTML comme ça fonctionne dans tous les navigateurs pertinents. Il suffit d'inclure le plugin, puis allez comme:

$('input, textarea').placeholder(); 

... et le plugin s'occupera du reste pour vous. Vous pouvez voir une démo ici: http://mathiasbynens.be/demo/placeholder

+1

+1 - plugin sexy aussi –

Questions connexes