Abro, November 2009

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

jQuery for input type password
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*



Ein kreativer Kommentar

  1. Thore Christiansen, 09.02.2012 17:58h

    Ein kleiner Workaround für das Problem wäre sich zwei Input-Elemente anzulegen und diese je nach Bedarf austauschen.

Kommentare sind geschlossen.
Aufgrund interner Umstrukturierungsmaßnahmen ist es uns z.Zt. leider nicht
möglich auf neue Kommentare zu reagieren. Wir bitten dies zu entschuldigen.
Bei dringenden Rückfragen suchen Sie bitten den direkten Kontakt zu uns.
Das Unternehmen Lucido Media GbR wurde am 31.12.2013 stillgelegt. Diese Website existiert weiterhin zu Archivzwecken. Der Gesellschafter Daniel Abromeit führt seine Arbeit ab sofort unter dem Dach der Agentur Koch Essen fort. Für entsprechende Anfragen wenden Sie sich daher bitte an https://koch-essen.de/kontakt/