Effacement des champs de saisie avec JavaScript

Question

Je regarde cela depuis quelques heures et je n'arrive pas vraiment à atteindre ce que je recherche. J'ai actuellement les deux entrées suivantes:

<input type="text" id="username" value="USERNAME" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 
<input type="password" id="password" value="PASSWORD" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 

Dans un premier temps, le texte des entrées est gris, et je le JavaScript fonctions suivantes onfocus et onblur:

var defaultInput = ""; 

function inputFocused(obj){ 
    defaultInput = obj.value; 
    obj.value = ""; 
    obj.style.color = "#000"; 
} 

function inputBlurred(obj){ 
    if(obj.value == ""){ 
     obj.style.color = "#AAA"; 
     obj.value = defaultInput; 
    } 
} 

J'essaie de trouver un moyen afin une fois que je commence à taper dans un champ, quittez le champ, puis revenez, il ne sera plus effacer l'entrée (puisqu'il contiendra alors quelque chose que l'utilisateur a tapé). J'ai pensé réaliser ceci avec une sorte de variable que je peux alterner entre 1 et 0 selon l'état, mais cela a semblé bâclé. Toute idée pour ce novice JS est grandement appréciée.

Answer 1

Dans entréeFocusée, vous effacez la valeur du champ d'entrée quel que soit l'état. Peut-être que je ne comprends pas votre intention, mais pourquoi abandonner la valeur en concentrant le contrôle?

Mise à jour: Ajout d'un attribut « defaultTextValue » à chaque élément vous permet de capturer la valeur par défaut de l'entrée sur le premier événement de mise au point. L'alternative consiste à utiliser l'événement onLoad de votre document pour capturer les valeurs par défaut. L'extrait ci-dessous efface les zones de texte lorsqu'elles sont focalisées et leur valeur est la même que les valeurs par défaut initialisées. Vous pourriez agacer les utilisateurs qui ont soit un nom d'utilisateur de « nom d'utilisateur » ou un mot de passe de « mot de passe », mais vous devriez probablement de toute façon 8-)

function inputFocused(obj) { 

    if (obj.defaultTextValue == undefined || obj.value == obj.defaultTextValue) { 
     obj.defaultTextValue = obj.value; 
     obj.value = ""; 
    } 
} 

function inputBlurred(obj) { 

    if (obj.value == "" && obj.defaultTextValue != undefined) { 
     obj.value = obj.defaultTextValue; 
    } 
} 

Answer 2

Vous pouvez faire une vérification pour voir si la valeur dans le champ est actuellement la valeur initiale.

Answer 3

Ajout au code de jscharf, vous pouvez utiliser l'attribut title de l'entrée champ pour stocker la valeur par défaut de chaque entrée. Ceci a l'avantage de la facilité d'utilisation de laisser les gens savent ce que le champ de saisie doit contenir quand ils planent au-dessus:

<input type="text" id="username" value="USERNAME" title="USERNAME" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 
<input type="password" id="password" value="PASSWORD" title="PASSWORD" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 

Et dans les js:

function inputFocused(obj){ 
    if(obj.title != obj.value){ 
     obj.value = ''; 
     obj.style.color = '#000'; 
    } 
} 

function inputBlurred(obj){ 
    if(obj.value == '' || obj.title == obj.value){ 
     obj.value = obj.title; 
     obj.style.color = '#AAA'; 
    } 
} 

Aussi, ne sais pas si vous avez envisagé de le faire , mais vous pouvez contrôler la couleur de mise au point de l'entrée en CSS si vous voulez (ne fonctionne pas dans IE6 bien sûr ... mais vous pouvez remplacer dans un IE6 seulement stylesheet):

input { 
    color: #AAA; 
} 


input:focus { 
    color: #000; 
} 

Answer 4

vous pouvez ajouter tout personnalisé les attributs du DOM de votre page HTML que vous le souhaitez, vous donne beaucoup de flexibilité.