T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« Kako postati davčni zavezanec
Opera developer tool »
25th April

Spreminanje input type text v input type password – Javascript

Pri projektu na katerem trenutno delam sem moral narediti Javascript, ki spremeni HTML Input objekt, ki je tipa text v tipa password. Zadeva je morala delovati v vseh standardnih brskalnikih (preizkušeno na IE 5.5, 6.0, 7.0, Opera, Safari, Firefox).

#1 HTML Input objekt tipa text, ki ga hočemo spremeniti v tipa password

PLAIN TEXT
HTML:
  1. <input name="password" onfocus="changeInputType(this, 'password');" type="text" value="Password" />

Javascript koda:

PLAIN TEXT
JAVASCRIPT:
  1. function changeInputType(prevObject, type) {
  2.     var passInput = document.createElement('input');
  3.     passInput.setAttribute('type', type);
  4.     passInput.setAttribute('name', prevObject.getAttribute('name'));
  5.     passInput.className = 'logfield';
  6.     passInput.id = 'passInput';
  7.     prevObject.parentNode.replaceChild(passInput, prevObject);
  8.  
  9.     setTimeout("focusInput('passInput');", 1);
  10. }

Opis:
Najprej kreiramo nov input objekt, dodamo tip objekta (v našem primeru password), določimo isti ime kot ga ima naš trenutni input katerega želimo zamenjati. Po želji dodamo še CSS class (za IE je potrebno uporabiti className = 'css class'. Potrebujemo še ID, da bomo lahko element potem fokusirali.

Ko imamo element pripravljen ga nadomestimo z prejšnim elementom (elementom input type text v našem primeru). Če uporabimo sledeče kodo za fokusiranje elementa:

PLAIN TEXT
JAVASCRIPT:
  1. passInput.focus();

... zadeva NE deluje v IE. Če pa vmes naredimo malce pavze (lahko naredimo tudi zanko za določeno število milisekund) in fokusiramo element potem zadeva začne delovati tudi v IE:

PLAIN TEXT
JAVASCRIPT:
  1. function focusInput(objectID) {
  2.     document.getElementById(objectID).focus();
  3. }

Datoteke:

Dodatne informacije:

Delodajalec: Pangaea.si

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Javascript – input text – le številke – validacija
  2. Javascript koledar – izbira datuma – jQuery date picker
  3. Kako preprečiti dvojno pošiljanje obrazca z pomočjo Javascript-a (form submit)
  4. Input background-color – spreminjanje z Javascript-om
  5. Javascript – document.getElementsByTagName
  6. Shrani datoteko / Odpri datoteko dialog – download center (mime-type, Content-type, Content-Disposition)
  7. PHP – kako ugotoviti tip datoteke (get file extension type)
  8. Javascript – scrolling – jQuery.scrollTo – jQuery.SerialScroll
  9. PHP funkcije v Javascript jeziku – isset
  10. Javascript – delci uporabne kode

Roky || Friday, April 25th, 2008 ob 1:15 am || Splet, Splet (Javascript, Ajax) || RSS 2.0 | Dodaj komentar || Trackback


14x komentirano na “Spreminanje input type text v input type password – Javascript”

  1. m je napisal:
    April 25th, 2008 ob 7:11 am

    Drugo vprašanje je, zakaj bi to sploh hotel naredit. Js se konkretno ne spomnim primera, da oz. zakaj bi spreminjal navadno polje v password. Elaborate?

  2. Roky je napisal:
    April 25th, 2008 ob 8:44 am

    Pri nam je bilo tako, da je bilo v designu narejen da sta pri loginu dva inputa kjer Piše znotraj Inputa:

    Username | Password

    In če uporabiš type="password", pol se namesto Password izpiše "********". Bom dodal gor primer.

  3. Carli je napisal:
    April 25th, 2008 ob 9:20 am

    V bistvu dober primerek! Bravo!

  4. Roky je napisal:
    April 25th, 2008 ob 9:25 am

    Jp. Primerek delovanja kjer je še malce boljša koda, ki input še če je prazen ali vsebuje Password spremeni nazaj v text input.

  5. FRiK je napisal:
    April 25th, 2008 ob 4:44 pm

    Jaz sem tole naredil na malo bolj začetniški način :)

    HTML:

    JS:
    function izprazni_pass() {
    if(document.loginform.password.value == "geslo") {
    document.loginform.password.value = "";
    document.loginform.password.type = "password";
    }
    }

    //če uporabnik nič ne vpiše v input
    function napolni_pass() {
    if(document.loginform.password.value == "") {
    document.loginform.password.type = "text";
    document.loginform.password.value = "geslo";
    }
    }

  6. Boštjan je napisal:
    April 25th, 2008 ob 6:21 pm

    u bistvu ne razumem zakaj je treba zamenjat objekt... lahko tudi po začetniško rešiš (nastaviš type = password), pa še bolj enostavno je :D razn če je kej uzadi, da to ne dela v x brskalnikih...

  7. Carli je napisal:
    April 26th, 2008 ob 9:30 am

    Zato da je fenci-šmenci ... to se danes prodaja :D

  8. Arjan je napisal:
    April 27th, 2008 ob 4:23 pm

    Na tak način je to "nevarno" za tiste ki imajo izklopljen javascript

    Boljše bi bilo najprej narediti input tipa password in ga onload() spremeniti v tekst

  9. Roky je napisal:
    April 28th, 2008 ob 6:34 pm

    Arjan: Tudi če nimajo javascript se uporabi text, kar pomeni da bo logiranje tudi uspelo, ker se POST podatki enako prenesejo kot pri password ali pa pri type.

    Boštjan@FriK: Type=password ne deluje na vseh brskalnikih, drugače bi z veseljem to uporabil.

  10. arjan_t je napisal:
    April 29th, 2008 ob 10:42 am

    ja samo lahko kdo vidi password, to je problem, ne kaj druga ...

  11. Roky je napisal:
    April 29th, 2008 ob 11:10 am

    arjan_t, to pa imaš prav ja. Se strinjam.

  12. Cobra je napisal:
    August 19th, 2008 ob 11:14 pm

    Kako bi pa recimo naredil če bi bio vpisano geslo z zvezdicami da ti to spremeni v valuto text?

  13. Roky je napisal:
    August 20th, 2008 ob 9:16 am

    Iz gesla težko, ker je tam vrednost ****** .... iz texta inputa pa bi lahko naredu onchange in potem pravilno formatiral text.

  14. Marko je napisal:
    October 21st, 2008 ob 10:16 am

    Ravnokar mi je tole prišlo prav! Odlično delo, na Google 1. zadetek :)

Dodaj komentar