Javascript "filigranes" pour les zones de texte

Je voudrais savoir comment mettre du texte dans une zone de texte lorsque la page se charge. Exemple: Si j'ai une page de connexion, j'aurais 2 zones de texte nommées "nom d'utilisateur" et "mot de passe". Quand la page se charge, je veux que la zone de texte soit chargée avec "nom d'utilisateur" écrit à l'intérieur, donc je n'aurai pas à mettre une étiquette pour cela à l'extérieur. Mais lorsque l'utilisateur clique dans la zone de texte, il devrait disparaître. Comment puis-je faire cela?Javascript "filigranes" pour les zones de texte

Source

2009-12-15 sin

http://stackoverflow.com/a/16471949/1257652 –

<input name="q" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

... dans la zone de recherche Stack Overflow .

Vous pouvez également ajouter l'événement onblur pour vérifier: if (this.value=='') this.value = 'search'

Ce serait réimprimez le filigrane lorsque l'utilisateur clique en dehors de la zone de texte et le champ est vide.

Source

2009-12-15 23:48:37

+1 pour la simplicité. – Brandon

Je voudrais également rendre le texte plus grisâtre et non noir – Faruz

Il existe de nombreux didacticiels sur la façon de procéder. Here's one walkthrough en utilisant le framework jQuery javascript.

Voici another popular blog post à ce sujet, en utilisant simplement javascript.

Source

2009-12-15 23:50:12 womp

JS:

function clearDefault(ctl){ 
     if(ctl.value==ctl.defaultValue) { ctl.value = ""; } 
    }

Dans votre zone de texte comprennent onfocus="clearDefault(this)" et définir son texte à "nom d'utilisateur" ou "mot de passe".

Source

2009-12-15 23:50:18 jball

N'utilisez pas l'attribut 'onfocus'. Utiliser les événements à la place –

Les attributs 'onfocus' (ainsi que' onblur') sont essentiellement des événements. Leurs valeurs sont égales au corps d'une fonction liée à l'événement. Donc avoir 'clearDefault (this)' pour 'onfocus' est essentiellement lié à votre gestionnaire d'événement' focus': 'function() {clearDefault (this); } ' –

Voir cet article http://www.alistapart.com/articles/makingcompactformsmoreaccessible. Bien sûr, si vous utilisez jQuery, il existe des plugins "Label over".

Source

2009-12-15 23:50:35

En termes profanes:

En se concentrant sur l'entrée, si la valeur est « Nom d'utilisateur » set alors à « »
Lors du retrait de focus de la zone, si la valeur est « » (à-dire rien n'a été entré), remis à zéro à « Nom d'utilisateur » pour fournir encore des commentaires à l'utilisateur car ils ne sont pas encore entré les données

le code:

<input value="Username" onfocus="if(this.value=='Username') this.value = ''" onblur="if(this.value=='') this.value = 'Username'" type="text" />

Source

2009-12-15 23:51:42

Une façon plus moderne est d'utiliser "PlaceHolder"

<input type="text" placeholder="search" />

Source

2014-08-01 17:24:01

C'est élégant! – theblackpearl

Javascript "filigranes" pour les zones de texte

Répondre

Questions connexes