Kompakt jelszó mező

tolmi, 2009, március 24 - 16:29
Related Terms :

Ma aboros keresett egy módot arra, hogy "kompakttá tegye" az űrlapmezőket. Ennek célja hogy az űrlapmezők cimkéje a mezőben magában jelenjen meg és ha belekattintunk a mezőbe, akkor a cimke eltűnik, ha nem írunk bele semmit, akkor a mezőt elhagyva újra a cimke jelenik meg. Nyilván ha kitöltöttük a mezőt, akkor a kitöltött érték marad a mezőben annak elhagyása után. Ezt megoldani nem nagy trükk egy kis sminkeléssel, ám ha szeretnénk a jelszó mezőket is ilyen kompakt formára hozni, akkor gyorsan beleütközünk abba, hogy a böngészők a jelszó mezőket "kicsillagozzák". Szóval hiába rakjuk a value="Jelszó" kezdeti értéket bele, ott 6db csillag fog szerepelni. Nem túl informatív, ugye.

Álljon itt egy megoldás a problémára, ami nekem nagyon sokszor jött már jól. A technika lényege, hogy a jelszó mezőt elrejtjük és a helyére berakunk egy textfield mezőt a cimkével, mint tartalommal. Amikor a felhasználó belekattint, akkor lecseréljük a textfieldet a jelszómezőre. Amikor elhagyjuk a mezőt, akkor visszacseréljük a két mezőt.

Alább egy kódrészlet, ami ezt megvalósítja. Drupal 6 alatt tesztelve.

  1. function compactPasswordFields(selector) {
  2.   $(selector).each(function() {
  3.     var passwordField = this;
  4.     var passwordFieldId = $(passwordField).attr("id");
  5.     var passwordFieldClasses = $(passwordField).attr("class");
  6.     var passwordLabel = $("label[for="+passwordFieldId+"]");
  7.     var spoofTextField = $("<input id=\""+passwordFieldId+"-spoof\" type=\"text\" value=\""+passwordLabel.text()+"\" class=\""+passwordFieldClasses+"\" />");
  8.  
  9.     /* Only proceed if the password field isn't prepropulated */
  10.     if ($(passwordField).val().length == 0) {
  11.       $(passwordField, passwordLabel).hide();
  12.       $(passwordField).before(spoofTextField);
  13.       $(passwordField).blur(function() {
  14.         if ($(passwordField).val().length == 0) {
  15.           $(passwordField).toggle();
  16.           $(spoofTextField).toggle();
  17.         }
  18.       });
  19.       $(spoofTextField).click(function() {
  20.           $(passwordField).toggle();
  21.           $(spoofTextField).toggle();
  22.           $(passwordField).focus(); 
  23.       });
  24.     }
  25.   });
  26. }
  27.  
  28. $(document).ready(function() {
  29.   /* Run this a hundred milliseconds later to let the browser pre-fill password fields */
  30.   setTimeout("compactPasswordFields(\"input.password-field, input.password-confirm\")", 100);
  31. });

Használjátok egészséggel!

Update: Van ám egy jobb megoldás is a TopNotchThemes-től: http://www.topnotchthemes.com/blog/081204/horizontal-user-login-block-us...

Címlap