jQuery.replaceWith() sur le champ d'entrée et rétabliront dans IE

Question

Il y a un script

http://gist.github.com/457324

qui définit le texte par défaut (extrait de l'attribut title de l'élément) pour vides input[type=text] et input[type=password] éléments.

Pour les éléments de mot de passe, ce n'est pas si trivial. Si je l'ai fait $(this).attr('value', $(this).attr('title')); pour input[type=password] il montrerait juste des points au lieu du texte par défaut. Changer le type de l'élément (du mot de passe au texte dans ce cas) n'est pas non plus largement supporté. La seule façon est donc de remplacer input[type='password'] par l'élément input[type='text'] (util.js: 26). Ce remplacement semble réinitialiser l'index de la page dans IE et commencer à partir du début de la page. Les autres navigateurs se comportent comme prévu.

J'ai trouvé une solution au problème similaire here mais cela ne fonctionne pas pour moi.

Avez-vous une idée de comment le réparer?

Answer 1

Il m'est arrivé d'écrire une fonction pour faire exactement cela aujourd'hui et trouvé votre message. Cette fonction gère l'échange de champs de mot de passe en utilisant setTimeout() avec un délai de 1 afin que le prochain "frame" d'exécution puisse se concentrer sur l'élément. Appelez simplement watermark() à partir d'un contexte document.ready().

/** Support outerHTML in all browsers, from http://www.briangrinstead.com/blog/jquery-outerhtml-snippet */ 
$.fn.outerHTML = function() { 
     var doc = this[0] ? this[0].ownerDocument : document; 
     return $('<div>', doc).append(this.eq(0).clone()).html(); 
}; 


/** Lightweight way to have subtle title instructions in text fields. */ 
function watermark(exclude) { 
     if (!exclude) exclude = ''; 

     $('input[type="text"], input[type="password"]').each(function(){ 
       var self = this; 
       function setTitle() { 
         if (self === document.activeElement) return; // Don't change the currently focused field 
         if (self.value.length == 0 && !$(self).is(exclude)) { 
           $(self).addClass('textLabel'); 
           if ($(self).attr('type') == 'password') { 
             var newSelf = $($(self).outerHTML().replace(/type=["]?password["]?/i, 'type="text"')).get(0); 
             $(self).replaceWith(newSelf); 
             self = newSelf; 
             $(self).data('restorePassword', true).focus(focus).blur(blur); 
           } 
           self.value = $(self).attr('title'); 
         } 
       } 
       setTitle(); 

       function focus(){ 
         if(self.value == $(self).attr('title')) { 
           $(self).removeClass('textLabel'); 
           if ($(self).data('restorePassword')) { 
             $(self).removeData('restorePassword'); 
             var newSelf = $($(self).outerHTML().replace(/type=["]?text["]?/i, 'type="password"')).get(0); 
             $(self).replaceWith(newSelf); 
             self = newSelf; 
             setTimeout(function() {$(self).focus().focus(focus).blur(blur);}, 1); 
           } 
           self.value = ''; 
         } 
       } 
       function blur(){ 
         setTitle(); 
       } 

       $(self).focus(focus).blur(blur); 
     }); 
}