2011-09-26 5 views
0

Est-ce que quelqu'un connaît un bon morceau de code qui va pré-remplir mon utilisateur et passer la zone de saisie avec le nom d'utilisateur et le mot de passe. J'ai vu si jscript qui va le faire mais je cherche quelque chose qui est quelques lignes un code.Zone de texte de saisie pré-remplie

semblable à la façon dont le texte de recherche est dans la zone de recherche en haut à droite

Répondre

1

Vous pouvez utiliser les éléments suivants:

<input type="text" style="color:#ccc;" value="username" onfocus="this.value = this.value=='username' ? '' : this.value; this.style.color='#000';" onfocusout="this.value = this.value == '' ? this.value = 'username' : this.value; this.value=='username' ? this.style.color='#ccc' : this.style.color='#000'"/> 

<input type="text" style="color:#ccc;" value="password" onfocus="this.value = this.value=='password' ? '' : this.value; this.style.color='#000';" onfocusout="this.value = this.value == '' ? this.value = 'password' : this.value; this.value=='password' ? this.style.color='#ccc' : this.style.color='#000'"/> 
+0

... et c'est le HTML standard. BTW, n'hésitez pas à externaliser les chaînes "nom d'utilisateur" et "mot de passe" aux constantes, et/ou tout autre refactoring nécessaire. – Saket

19

Pour les navigateurs qui prennent en charge HTML5, l'ajout d'espace réservé = « recherche » ajoutera automatiquement le texte prérempli.

La zone de texte de recherche en haut de la page a:

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

Vous pouvez utiliser une cale HTML5 pour rendre ce rétrocompatible. Exemple: http://kamikazemusic.com/web-development/revisiting-html5-placeholder-fixes/

+0

bon! Et @acctman, au cas où vous ne le sauriez pas, cela peut être compris en visualisant la source de cette page, en utilisant l'option "Afficher la source de la page" (clic-droit n'importe où sur cette page). – Saket

+0

Voici un lien plus à jour à la cale d'espace réservé: http://kamikazemusic.com/web-development/revisiting-html5-placeholder-fixes/ Fonctionne bien! Merci – Wipster

Questions connexes