un meilleur moyen d'échanger des valeurs d'entrées de texte?

J'ai un email d'inscription et une boîte de recherche qui ont l'étiquette à l'intérieur de la boîte, IE la boîte de courriel dit "inscrivez-vous" à l'intérieur de l'entrée. Lorsque vous cliquez dans la case, la valeur est supprimée vous permettant d'entrer votre email, si vous n'entrez rien et cliquez sur, l'inscription "re" apparaît. Je suis en utilisant le code suivant:un meilleur moyen d'échanger des valeurs d'entrées de texte?

$(function() { 
    swapValues = []; 
    $(".swap_value").each(function(i){ 
     swapValues[i] = $(this).val(); 
     $(this).focus(function(){ 
      if ($(this).val() == swapValues[i]) { 
       $(this).val(""); 
      } 
     }).blur(function(){ 
      if ($.trim($(this).val()) == "") { 
       $(this).val(swapValues[i]); 
      } 
     }); 
    }); 
});

Cependant, je reçois l'erreur suivante dans la console et suis peut-être avoir des problèmes avec d'autres scripts en raison de cela. Je sais à coup sûr quand je finis le débogage.

erreur affectation à swapValues variable non déclarée

est-il une meilleure façon de le faire? thx

Source

2010-10-01 Dirty Bird Design

Je ne pense pas que je sois la valeur que vous pensez quand le focus et le flou sont appelés. –

Cela fonctionne mais obtient l'erreur. Connaissez-vous un meilleur moyen? –

Je pense que vous avez encore besoin de 2 auditeurs

$('.swap_value').focus(function(){ 
     if($(this).val() == 'sign up'){ 
     $(this).val(''); 
     } 
    }).blur(function(){ 
     if($(this).val() == ''){ 
     $(this).val('sign up'); 
     } 
    });

J'espère que des thats vous donne un exemple de la façon de travailler avec 2 champs:

<html> 
    <body> 
     <input type="text" value="sign up" class="swap_value singup"/> 
     <input type="text" value="search" class="swap_value search"/> 
    </body> 
</html> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script> 
    //<!-- 
    $(document).ready(function(){ 
     $('.swap_value').focus(function(){ 
      if($(this).val() == 'sign up' || $(this).val() == 'search'){ 
      $(this).val(''); 
      } 
     }); 
     $('.search').blur(function(){ 
      if($(this).val() == ''){ 
      $(this).val('search'); 
      } 
     }); 
     $('.singup').blur(function(){ 
      if($(this).val() == ''){ 
      $(this).val('sign up'); 
      } 
     }); 
    }); 
    //--> 
</script> 
</body> 
</html>

Source

2010-10-01 15:52:46 Hannes

cela fonctionne très bien. Est-il possible d'utiliser la même fonction pour 2 boîtes, if ($ (this) .val() == 'inscrire' || 'search') ou dois-je écrire des fonctions séparées pour chacune? quand je fais cela, il remplace "recherche" par "chanter" sur flou –

@Dirty Bird Design s'ils ont la même classe que les auditeurs vont appliquer à la bove d'eux MAIS tandis que vous pouvez dire 'if ($ (this) .val () == 'inscrivez-vous' || $ (this) .val() == 'search') '...' $ (this) .val() == '' 'est toujours le même, donc vous avez besoin de moins de 3 écouteurs – Hannes

Oui, les deux sont ".swap_value". J'arrive où je peux combiner le premier "if ($ (this) .val() == 'inscrire' || $ (this) .val == 'search') mais je ne suis pas sûr de la fonction de flou, il continue à remplacer la valeur avec inscrivez-vous comment liez-vous la recherche à l'auditeur de recherche? –

Cela peut être un peu trop tard, mais j'ai eu votre code pour travailler avec une légère modification:

var swapValues = []; 

$('input.swap_value').each(function(i){ 

    swapValues[i] = $(this).attr('value'); 

    $(this) 
    .focus(function(){ 
     if ($(this).attr('value') == swapValues[i]) { 
      $(this).attr('value',''); 
     } 
    }) 
    .blur(function(){ 
     if ($(this).attr('value') == '') { 
      $(this).attr('value', swapValues[i]); 
     } 
    }); 

});

Fondamentalement, je suis maintenant en utilisant .attr('value') au lieu de .val(). Je ne suis pas sûr si c'était votre problème en premier lieu, mais le code ci-dessus est confirmé travaillant sur plusieurs entrées de texte sur une seule page.

Source

2011-05-05 17:16:20 Heath

merci l'homme, je vérifie toujours tout cela. Je l'apprécie et l'ai fait fonctionner comme vous l'avez. Merci encore! –

Ceci est une vieille question, mais il existe de nouvelles façons de le faire ces jours-ci. L'attribut placeholder en HTML5 couvre cette fonctionnalité, bien que IE9 et les versions antérieures et Opera Mini ne la prennent pas en charge.

Exemple

<input type="email" placeholder="Sign Up" required>

Notez le type et l'attribut requis. Combinés, les navigateurs prenant en charge le type email effectuent une vérification côté client pour un e-mail valide. Les navigateurs qui ne prennent pas en charge le type email afficheront une zone de texte normale. Il existe également un type search qui fournit un «x» pour effacer les termes de recherche si nécessaire. Il retourne également à une zone de texte brut dans les navigateurs non pris en charge.

Si vous devez prendre en charge les anciens navigateurs, la réponse acceptée peut fonctionner comme solution de repli.

Source

2014-05-22 01:47:25

un meilleur moyen d'échanger des valeurs d'entrées de texte?

Répondre

Questions connexes