Comment garder un texte d'entrée supprimé par jquery lorsque vous revenez avec un navigateur?

J'ai un bug avec la page suivante: http://jsbin.com/agedu/ Code source avec quelques commentaires: http://jsbin.com/agedu/edit

Le problème est que lorsque vous tapez quelque chose et que vous faites la requête pour afficher les résultats de recherche, si je retourne à la page de recherche dans mon navigateur (Firefox 3.5, mais c'est la même chose avec IE8), il n'y a plus de termes de recherche.

Il est remplacé par un texte gris. Ce texte gris que je souhaite seulement quand il n'y a pas de texte rempli.

Lorsque je retire le code jQuery, si je fais une recherche et appuyez sur le bouton "Retourner" sur mon navigateur, le texte rempli est toujours présent.

Et même avec cette page d'exemple: http://mucur.name/system/jquery_example/

Si j'écris du texte, chargez une autre URL dans la barre d'adresse, puis appuyez sur le bouton de retour, le texte rempli est toujours présent, alors que ce n'est pas avec mon code.

Donc, ma question est la suivante: avez-vous une idée de la façon de conserver ce texte s'il est rempli?

Il devrait y avoir un moyen de détecter si l'entrée est remplie et d'éviter de remplacer le texte si tel est le cas.

Il peut provenir des navigateurs et de la façon dont ils traitent JavaScript mais je n'en suis pas sûr.

Wow, il a fallu beaucoup de temps pour déboguer celui-ci, je pense que vous devriez utiliser la méthode val au lieu d'utiliser l'attribut 'valeur'.

Quoi qu'il en soit, la ligne problématique est celle-ci

$(this).attr('value', hvalue).addClass(opts.hclass).unbind('focus blur').bind('focus',

Dans la ligne ci-dessus, lorsque vous attribuez l'attribut 'valeur', vous modifiez réellement la valeur de la zone de texte. Vous ne devriez le modifier que s'il n'est pas vide.

J'ai changé votre code un peu pour utiliser la méthode val () partout et cela fonctionne comme vous l'aviez prévu.

Démonstration de travail: http://jsbin.com/ihegu/

[Notez comment la démo enregistre correctement le texte «Wikipedia» lorsque vous recherchez quelque chose sur Google et cliquez sur le bouton Précédent.]

  (function($) { $.fn.inputdynvalue = function(options) { var opts = $.extend({}, $.fn.inputdynvalue.defaults, options); return this.each(function() { var hvalue = opts.htext; switch (opts.htext) { case 'title': hvalue = $(this).attr('title'); break; case 'value': hvalue = $(this).val(); break; } //Modify the text value ONLY if it's non empty. if($(this).val() === '') { $(this).val(hvalue); } //If title and value is same, apply the grey text class. if($(this).val() === this.title) { $(this).addClass(opts.hclass); //Why do you unbind the event? }; $(this).bind('focus', function() { if ($(this).val() === this.title) { $(this).val(''); $(this).removeClass(opts.hclass); } }); $(this).bind('blur', function() { if ($(this).val() === '') { $(this).val(this.title); $(this).addClass(opts.hclass); } }); }); }; $.fn.inputdynvalue.defaults = { htext: 'title', hclass: 'hint' }; })(jQuery); $(document).ready(function() { $("input[type='text']").inputdynvalue(); });

Lorsque vous initialisez votre plugin, vous avez réglé la réinitialisation de la valeur des entrées, j'ai juste refacturé un peu et ajouté la vérification suivante:

  if (this.value === '' || this.value === hvalue){ $(this).attr('value', hvalue).addClass(opts.hclass); }

J'ai séparé ces opérations de votre chaîne de connexion événementielle.

Maintenant, il ne définira que la valeur par défaut (hvalue) et la classe de gris par défaut (hclass) si la valeur de l'élément est '' ou elle a la valeur par défaut .

Vérifiez votre extrait ici .

Testé dans IE8 et FF

Ceci est copié à partir de la source et modifié.

J'ai fait un contrôle de texte fantôme dans les vieux js un peu en arrière, en le regardant jQuery me fait envie de revenir en arrière et de le réécrire.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <!-- Created using http://jsbin.com Source can be edited via http://jsbin.com/oxeye/edit --> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> .hint { color: #C0C0C0; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> </head> <body> <form action="http://www.google.com/search?&q="> <div class="saisie"> <input type="text" id="lr_text" name="q" title="Google" /> <button type="submit">OK</button> </div> <div class="options"> <label for="lang_en"><input type="radio" checked="checked" id="lang_en" name="lr" title="English Google" />English</label> <label for="lang_fr"><input id="lang_fr" type="radio" name="lr" title="French Google" />French</label> <label for="lang_de"><input id="lang_de" type="radio" name="lr" title="German Google" />German</label> <label for="lang_es"><input id="lang_es" type="radio" name="lr" title="Spanish Google" />Spanish</label> </div> </form> <form method="post" action="http://en.wikipedia.org/wiki/Special:Search?search="> <div class="saisie"> <input type="text" id="wikipedia_text" name="champ_wikipedia" title="Wikipedia" /> <button type="submit">OK</button> </div> <div class="options"> <label for="wik_en"><input type="radio" checked="checked" name="wikipedia" id="wik_en" title="English Wikipedia" />English</label> <label for="wik_fr"><input type="radio" name="wikipedia" id="wik_fr" title="French Wikipedia" />French</label> <label for="wik_de"><input type="radio" name="wikipedia" id="wik_de" title="German Wikipedia" />German</label> <label for="wik_es"><input type="radio" name="wikipedia" id="wik_es" title="Spanish Wikipedia" />Spanish</label> </div> </form> <script type="text/javascript"> $(document).ready(function() { function setText() { var kf = this.title.split('|'); if (kf.length < 0) return; if ($('#' + this.name + '_text').hasClass('hint')) { $('#' + this.name + '_text').val(kf[0]).addClass('hint'); } $('#' + this.name + '_text').attr('title', kf[0]); } $("input[type='text']").inputdynvalue(); $("input[type='radio']").click(setText); }); (function($) { $.fn.inputdynvalue = function(options) { var opts = $.extend({}, $.fn.inputdynvalue.defaults, options); return this.each(function() { var hvalue = opts.htext; switch (opts.htext) { case 'title': hvalue = $(this).attr('title'); break; case 'value': hvalue = $(this).attr('value'); break; } //if value == title change class to 'hint' if ($(this).attr('value') == $(this).attr('title')) { $(this).addClass(opts.hclass); } $(this).attr('value', hvalue).unbind('focus blur').bind('focus', function() { if (this.value === this.title) { this.value = ''; $(this).removeClass(opts.hclass); } }).bind('blur', function() { if (this.value === '') { this.value = this.title; $(this).addClass(opts.hclass); } }); }); }; $.fn.inputdynvalue.defaults = { htext: 'value', //changed to value hclass: 'hint' }; })(jQuery); $(document).ready(function() { //Set hint $("input[type='text']").blur(); }); </script> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-1656750-13"); pageTracker._trackPageview(); </script></body></html>

La fonction inputdynvalue () force explicitement le texte de la zone de texte lorsqu'il est appelé, même si la zone de texte n'est pas vide.

Réparez-le de la manière suivante:

  (function($) { $.fn.inputdynvalue = function(options) { var opts = $.extend({}, $.fn.inputdynvalue.defaults, options); return this.each(function() { var hvalue = opts.htext; switch (opts.htext) { case 'title': hvalue = $(this).attr('title'); break; case 'value': hvalue = $(this).attr('value'); break; } if (this.value === '') { $(this).attr('value', hvalue).addClass(opts.hclass) } $(this).unbind('focus blur').bind('focus', function() { if (this.value === this.title) { this.value = ''; $(this).removeClass(opts.hclass); } }).bind('blur', function() { if (this.value === '') { this.value = this.title; $(this).addClass(opts.hclass); } }); }); }; $.fn.inputdynvalue.defaults = { htext: 'title', hclass: 'hint' }; })(jQuery);

La clé est les lignes:

  if (this.value === '') { $(this).attr('value', hvalue).addClass(opts.hclass) }

Qui remplace l'écrasement non conditionnel d'avant.

La version fixe peut être consultée sur http://jsbin.com/ikipi .