Lucido Media

jQuery: Input[type=password] mit Input[type=text] austauschen

Psst, ganz leise. Hört ihr das tuckern und rattern? Genau – in der jQuery Agentur wird wieder gearbeitet!

Heute bin ich erneut wirr durchs Netz gegeistert und war mal wieder nicht erbaut, was die Leute so mit jQuery anstellen. Ich find’s total toll, dass viele ihren Source mit anderen teilen, bin aber der Überzeugung, dass man alles so allgemeingültig wie möglich schreiben sollte.

Aufgabe: Zugänglichkeit für’s Password-Input

Aufgabenstellung war heute „Austauschen von input[type=password] mit input[type=text]“. Und ist verdammt nochmal nicht so trivial wie es sich anhört. Was mit ein Grund sein mag, warum ich viel schönes gesehen habe, bei dem aber die zentrale Grundfrage nur halbherzig gelöst wurde. jQuery bietet sich ja immer zum spielen an ;O)

Probleme

• $('input[type=password]').attr('type','text');
  Funktioniert nicht, denn jQuery wirft hier explizit einen Fehler um die Kompatibilität mit dem IE aufrecht zu erhalten.
• var $el = $('input[type=password]');
$el.replaceWith($el.clone().attr('type','text'));
  Ist das selbe wie oben, veräppelt aber jQuery, sodass es keinen Fehler mehr wirft. Nun macht das einfach mal im IE. Da meckert der noch an ganz anderen Stellen.
• $('input[type=password]').parent().html();
  Ergebnis im FF:
  <input type=”password” value=”your-pw” name=”pw” id=”pw” />
  Ergebnis im IE (ca.):
  <INPUT type=password value=your-pw name=pw id=pw>
• $('#insert-your-stuff-here').html('<input type="text" value="'+val+'" />')
  Löscht uns natürlich die ganzen Attribute wie class, alt, etc.
• In so ziemlich allen Fällen löscht uns der IE den Value, wenn er gerade lustig ist.

Lösung

1
2
3
4
5
6
7
8
9
10

 //'input:password' returns a strict error...
 $('input[type=password]').each(function()
 {
   var pw       = $(this).val(),
       $me_wrap = $(this).wrap('<span></span>').parent(),
       $me_new  = $(
         $me_wrap.html().replace(/(<input[^>]+type=('|")?)password(\2[^>]*>)/i,'$1text$3')
       );
   $me_wrap.replaceWith($me_new.val(pw)); //because ie resets the input's value
 });

Verbesserungsvorschläge sind wie immer höchst willkommen.
Fortschritt ist kein leerer Wahn, kommt stellt die Maschinen an … *summ*