Insérer une valeur par défaut si texte d'entrée est supprimé

Question

je la pièce de code suivante jQuery:

$(".SearchForm input:text").each(function(){   
    /* Sets the current value as the defaultvalue attribute */ 
    if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "") 
    { 
     $(this).attr("defaultvalue", $(this).val()); 
     $(this).css("color","#9d9d9d"); 


     /* Onfocus, if default value clear the field */ 
     $(this).focus(function(){    
      if($(this).val() == $(this).attr("defaultvalue")) 
      { 
       $(this).val(""); 
       $(this).css("color","#4c4c4c"); 
      } 
     }); 

     /* Onblur, if empty, insert defaultvalue */ 
     $(this).blur(function(){ 
      alert("ud"); 

      if($(this).val() == "") 
      { 
       $(this).val($(this).attr("defaultvalue"));     
       $(this).css("color","#9d9d9d"); 
      }else 
      { 
       $(this).removeClass("ignore"); 

      } 
     }); 

    } 

}); 

J'utiliser ce code pour insérer du texte par défaut dans certains de mes champs d'entrée, quand rien d'autre est tapé Cela signifie que lorsqu'un utilisateur voit mon formulaire de recherche, les valeurs par défaut seront définies en tant qu'attribut dans le champ de saisie, et ce sera la valeur affichée. Lorsqu'un utilisateur clique à l'intérieur du champ de saisie, la valeur par défaut sera supprimée.

Lorsque l'utilisateur voit un champ d'entrée est d'abord ressemble à ceci:

<input type="text" value="" defaultvalue="From" /> 

Cela fonctionne très bien, mais j'ai un grand défi. Si un utilisateur a posté le formulaire et que quelque chose est entré dans l'un des champs, je ne peux pas afficher la valeur par défaut dans le champ, si l'utilisateur supprime le texte du champ de saisie. Cela se produit car la valeur du champ de texte contient toujours quelque chose, même lorsque l'utilisateur supprime le contenu. Donc, mon problème est comment montrer la valeur par défaut lorsque le formulaire est soumis, et l'utilisateur supprime alors le contenu tapé?

Lorsque le formulaire est soumis l'entrée ressemble à ceci, et continue à ressembler à ceci jusqu'à ce que le formulaire est soumis à nouveau:

<input type="text" value="someValue" defaultvalue="From" /> 

donc je dois montrer la valeur par défaut dans l'entrée sur le terrain juste après la l'utilisateur a supprimé le contenu dans le champ et a supprimé l'attention du champ.

Est-ce que tout le monde comprend mon problème? Sinon, demandez simplement, j'ai lutté avec celui-ci depuis quelques temps maintenant, donc toute aide sera grandement appréciée.

Merci à l'avance, Kim Andersen

Answer 1

Vous affectez l'attribut defaultvalue à la valeur actuelle des lignes 3-5 de votre code. Le commentaire à la ligne 2 vous dit même ce que vous faites.

/* Sets the current value as the defaultvalue attribute */ 
if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "") 
{ 
    $(this).attr("defaultvalue", $(this).val()); 

Le problème est que vous entrez ce bloc même si la valeur actuelle de l'entrée est vide (""). Lorsque cela se produit, vous mettez à jour le defaultValue pour être vide. Essayez de commenter cette cession ou peut-être même simplement se débarrasser de cette déclaration si extrême tout ensemble. Je suggère également d'utiliser une classe pour changer la couleur du texte pour votre champ de saisie ciblée. Ou utilisez simplement la pseudo-classe: focus dans votre css.

// in your css 
.SearchForm input { color: #9d9d9d; } 
.SearchForm input.focused, 
.SearchForm input:focus { #4c4c4c; } 


$(".SearchForm input:text") 
    //.unbind('focus').unbind('blur') // uncomment if playing in the console 
    .focus(function() { 
     var $this = $(this); 
     if ($this.val() == $this.attr("defaultvalue")) 
     { 
      $this.val("") 
       //.addClass('focused'); 
     } 
    }) 
    .blur(function() { 
     var $this = $(this); 
     if ($this.val().trim() == "") 
     { 
      $this.val($this.attr("defaultvalue")); 
     } 
     //$this.removeClass('focused'); 
    }); 

Note:: focus ne va pas travailler pour IE 8 < et je pense que IE6 a du mal à comprendre ce qu'il faut faire avec plus d'une classe. Donc, si vous essayez de rester IE6 amical coller avec l'ajout et la suppression de la couleur css directement dans votre code.

Answer 2

Je pense que je fais quelque chose comme ce que vous cherchez sur notre champ de recherche. Voici le script de la fonctionnalité qui montre la recherche jusqu'à ce que la boîte a le focus, quand elle perd le focus et que le champ est toujours vide. Je remets la recherche dedans.

$('#nav-search-box').addClass("idleField").focus(function() { 
$(this).removeClass("idleField").addClass("focusField"); 
if (this.value == this.defaultValue) { 
this.value = ''; 
} 
if (this.value != this.defaultValue) { 
this.select(); 
} 
}).blur(function() { 
$(this).removeClass("focusField").addClass("idleField"); 
if ($.trim(this.value) == '') { 
this.value = (this.defaultValue ? this.defaultValue : ''); 
} 
}).keypress(function(e) { 
if (e.which == 13) { 
window.location = "/search/" + $(this).val(); 
} 
}); 

Si vous souhaitez supprimer le texte du champ sur les messages puis juste désactiver le poste de formulaire et ajouter un gestionnaire de clic de bouton ou quelque chose de similaire.

function disableFormPost() 
{ 
    $("#formid").submit(function() { return false }); 
}