Fade out valeur de texte à l'intérieur d'un champ de texte à l'aide de jQuery

Je ne suis pas entièrement sûr si c'est possible ou pas, je suis assez bien informé quand il s'agit de jQuery et JavaScript en général, mais celui-ci m'a déconcerté. J'ai créé un plugin simple qui efface la saisie de texte sur l'objet, puis affiche la valeur par défaut si rien n'a été entré.

Est-il possible de fade out juste le texte lui-même à l'intérieur de la saisie de texte, et non pas l'ensemble du champ lui-même? Toutes les tentatives sembler être le résultat dans le champ de texte lui-même à la décoloration et finalement se cacher l'élément de la vue.

Je suis venu avec une solution de l'utilisation de couvre contenant la valeur par défaut et absolument positionnement sur la saisie de texte, le masquage et l'affichage en fonction si un utilisateur a entré un texte ou pas. Je préférerais de beaucoup beaucoup approche simple s'il en existe un.

Modifier

À l'aide de la fonction animate de jQuery qui est en jQuery UI ou disponibles en tant que plugin pour jQuery, vous pouvez animer la couleur du texte à la couleur de l'entrée sur la focalisation et le flou du champ (comme l'a souligné ci-dessous). Voici le code que j'utilise dans des cas vous voulais savoir comment.

    obj.bind("focus", function() {
  if ($(this).val() == oldValue) {
      $(this).animate({ color: '#E8DFCC' }, 1000).val('');
  }
 });

 obj.bind("blur", function() {
  if ($(this).val().length <= 3) {
      $(this).animate({ color: '#56361E' }, 600).val(oldValue);
  }
 });
  • Vous avez déjà cloué le meilleur de la croix-navigateur solution ici, un élément positionné sur le dessus, pas sûr que vous pouvez l'améliorer tout en travaillant partout.
InformationsquelleAutor Dwayne Charrington | 2010-06-18
  1. 6

    Juste une pensée rapide, avez-vous essayé d'utiliser l'animation de la méthode pour changer la couleur du texte dans la zone de texte pour s'adapter au fond? Ensuite, lorsque l'animation est terminée, vous pouvez effacer le contenu.

    Sa pensée. Son été un moment depuis que j'ai utilisé l'animation des trucs, mais je pourrais probablement concocter un exemple de code si vous êtes intéressé.

    • Merci beaucoup pour la suggestion. Je devrais être à écrire un peu de code d'animation, je connais assez bien qu'à peine l'utiliser pour l'essayer. Je vais rendre compte comment je vais, mais je pense que ça va fonctionner.
    • Simple, mais élégant. jQuery ne supporte pas la couleur des animations hors de la boîte, mais si vous avez de jQuery UI, vous pouvez faire de la couleur des animations, sinon, il y a une animation de couleur plugin, vous pouvez le télécharger en tant que bien. J'ai mis à jour ma question afin de refléter le code que j'ai utilisé dans le cas de quelqu'un d'autre voudrais savoir comment le faire.
    • Génial, je n'ai pas eu la chance de le tester (les disputes des enfants entre ma crack-débordement de bugs), donc je suis heureux, il a travaillé (avec jQuery UI).
    • Mise à jour: jsfiddle.net/7ksWA/3
    • tout doit être marqué dupe et le point à ce
    InformationsquelleAutor ckramer
  2. 4

    voici ce que j'utilise exactement cela.
    d'abord l'ajouter à votre JavaScript comprend:
    http://plugins.jquery.com/project/color

    ensuite ce faire:

    $('.search-input').focus(function(){
    if($(this).val() == 'Default Text'){
        $(this).animate({
            color: '#fff'
            //your input background color.
        }, 500, 'linear', function(){
            $(this).val('').css('color','#000'); 
            //this is done so that when you start typing, you see the text again :P
        });
    }
}).blur(function(){
    if($(this).val() == ''){
        $(this).val('Default Text').css('color','#fff');
        $(this).animate({
            color: '#000'
        }, 500, 'linear');
    }
});

    ce que cela va faire est fondu à l'ouverture du texte à la couleur de fond et ensuite vider le champ de saisie. et sur le flou afficher le texte par défaut en premier, puis fondu revenue à sa couleur d'origine.

    une illusion 🙂

    vous pouvez supprimer une grande partie de cette si vous ne souhaitez pas réellement effacer le champ. mais vous obtenez l'idée. la clé ici deux choses. utiliser le plugin color et .animate() de l'effet.

    InformationsquelleAutor Jubair
  3. 0

    Je viens de tomber sur ce problème, ma solution est très simple, il suffit de modifier l'attribut "value" de'. Ce sera essentiellement de remplacer le texte avec rien.

    $(selector).attr('value', '');
    • Cela supprime tout le texte dans le champ au lieu de la douceur de la décoloration de la sortir. Notez que $(selector).val(""); est encore plus courte.
    • Cette sortof fonctionne: .fadeOut().val("valeur à neuf").fadeIn (), mais l'ensemble du champ de saisie disparaît ce qui est laid.
    InformationsquelleAutor Brett