Hogyan cseréljünk le egy password mezőt text mezőre

2010. szeptember 16., írta: Poetro

A Űrlap mező helykitöltő jQuery kiegészítő bejegyzés kapcsán merült fel, hogyan lehetne lecserélni a password mezőt egy text mezőre., Így az inputPlaceholder plugin az is ki tudná írni a „password” mezőbe, hogy „_jelszó” nem csak „******_” szerepelne a mezőben.

Ennek érdekében lemásoljuk az eredeti password mezőt, az összes tulajdonságával együtt, majd beszúrjuk a jelszó mező elé, de már mint szövegmező. Erre azért van szükség, mert Internet Explorer esetén, a már dokumentumban levő jelszó mezőből nem tudunk szövegmezőt csinálni. Írtam is egy nagyszerű kis jQuery kiegészítőt, ami ezt meg is csinálja:

(function ($) {
  $.fn.extend({
    passwordTextSwap : function () {
      this.filter('input:password').each(function () {
        var pw = this,
            attributes = {              // Kötelező attribútumok, és az
              focus: function (event) { // eseménykezelőnk.
                $(pw).show();
                $(this).hide()
                pw.focus();
                event.preventDefault();
              },
              type: 'text',
              value: '',
              id: $.noop(),
              name: $.noop()
            },
            al = pw.attributes.length,
            i = 0,
            attr, ph;

        // Lemásoljuk az attributumokat.
        for (; i < al; i += 1) {
          attr = pw.attributes[i];
          // A már létező mezőket és a `name` mezőt nem másoljuk.
          if (!(attr.name in attributes)) {
            attributes[attr.name] = attr.value;
          }
        }

        // Ha elhagyjuk a jelszó mezőt, és az üres,
        // akkor visszaállítjuk a szövegmezőt helyette.
        $(pw).hide().blur(function () {
          if (!this.value) {
            ph.show();
            $(this).hide()
          }
        });

        // Beszúrjuk a szövegmezőt a jelszó mező elé.
        ph = $('<input>', attributes).insertBefore(this);
      });
      return this;
    }
  });
}(jQuery));

GitHub

A kiegészítő felköltözött a GitHub-ra, érdemes ott nézni, hogyan fejlődik.