Je ne suis pas tout à fait sûr que cela est possible ou non, je suis assez compétent en ce qui concerne JQuery et JavaScript en général, mais celui-ci m'a soulevé. J'ai créé un plugin simple qui efface une entrée de texte sur la mise au point puis affiche la valeur par défaut si rien n'a été entré.
est-il possible de disparaître uniquement le texte lui-même à l'intérieur de l'entrée de texte et non du champ complet lui-même? Toutes les tentatives semblent résulter dans le champ de texte lui-même décolorée et éventuellement cacher l'élément de la vue. P>
Je suis arrivé avec une solution d'utilisation des effectifs contenant la valeur par défaut et de les positionnez absolument sur l'entrée de texte, cacher et leur montrer en fonction si un utilisateur est entré dans un texte ou non. Je préférerais beaucoup une approche beaucoup plus simple si l'on existe. P>
Utilisation de la fonction JQuery Animate qui est dans JQuery UI ou disponible en tant que plugin pour JQuery, vous pouvez animer la couleur du texte pour être la couleur de l'entrée lors de la mise au point et du flou du champ (comme indiqué ci-dessous). Voici le code que j'utilise au cas où vous vouliez savoir comment. P> 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);
}
});
3 Réponses :
Juste une pensée rapide, avez-vous essayé d'utiliser la méthode d'animation pour modifier la couleur du texte dans la zone de texte pour correspondre à l'arrière-plan? Ensuite, lorsque l'animation complète, vous pouvez effacer le contenu.
C'est une pensée. Son a été un moment depuis que j'ai utilisé les affaires d'animation, mais je pourrais probablement préparer un échantillon de code si vous êtes intéressé.
Merci beaucoup pour la suggestion. Je devrais avoir raison d'écrire du code d'animation, je le connais assez bien, même s'il l'utilise à peine pour l'essayer. Je rappellerai comment je vais, mais je pense que cela fonctionnera.
Simple, mais élégante solution. JQuery ne prend pas en charge les animations de couleur de la boîte, mais si vous avez JQuery UI, vous pouvez faire des animations de couleur, sinon il y a un plugin d'animation couleur que vous pouvez télécharger également. J'ai mis à jour ma question pour refléter le code que j'ai utilisé au cas où quelqu'un d'autre voudrait savoir comment le faire.
Impressionnant, je n'avais pas la chance de le tester (enfants qui se maîtrisent entre mes corrections de crack-overflow), donc je suis content que cela ait fonctionné (avec JQuery UI).
Voici ce que j'utilise pour exactement cela. Tout d'abord, ajoutez ceci à votre JavaScript comprend: http://plugins.jquerery.com/project/color
Alors faites ceci: P>
$('.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');
}
});
Je viens de courir dans ce problème, ma solution est assez simple, changez simplement l'attribut "valeur" à "". Cela remplacera essentiellement le texte sans rien.
$(selector).attr('value', '');
Cela supprime simplement le texte dans le champ au lieu de la décolorer en douceur. Notez que $ (sélecteur) .val (""); est encore plus court.
Cette solution fonctionne: .fadeout (). Val ("nouvelle valeur"). Fadein () Mais tout le champ d'entrée disparaît qui est laid.
Vous avez déjà cloué la meilleure solution de navigateur croisée ici, un élément positionné sur le dessus, pas sûr de pouvoir l'améliorer tout en travaillant partout.