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
-
<input name="password" onfocus="changeInputType(this, 'password');" type="text" value="Password" />
Javascript koda:
-
function changeInputType(prevObject, type) {
-
var passInput = document.createElement('input');
-
passInput.setAttribute('type', type);
-
passInput.setAttribute('name', prevObject.getAttribute('name'));
-
passInput.className = 'logfield';
-
passInput.id = 'passInput';
-
prevObject.parentNode.replaceChild(passInput, prevObject);
-
-
setTimeout("focusInput('passInput');", 1);
-
}
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:
-
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:
-
function focusInput(objectID) {
-
document.getElementById(objectID).focus();
-
}
Datoteke:
Dodatne informacije:
Delodajalec: Pangaea.si
april 25th, 2008 ob 7:11 dopoldne
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?
april 25th, 2008 ob 8:44 dopoldne
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.
april 25th, 2008 ob 9:20 dopoldne
V bistvu dober primerek! Bravo!
april 25th, 2008 ob 9:25 dopoldne
Jp. Primerek delovanja kjer je še malce boljša koda, ki input še če je prazen ali vsebuje Password spremeni nazaj v text input.
april 25th, 2008 ob 4:44 popoldne
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";
}
}
april 25th, 2008 ob 6:21 popoldne
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
razn če je kej uzadi, da to ne dela v x brskalnikih...
april 26th, 2008 ob 9:30 dopoldne
Zato da je fenci-šmenci ... to se danes prodaja
april 27th, 2008 ob 4:23 popoldne
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
april 28th, 2008 ob 6:34 popoldne
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.
april 29th, 2008 ob 10:42 dopoldne
ja samo lahko kdo vidi password, to je problem, ne kaj druga ...
april 29th, 2008 ob 11:10 dopoldne
arjan_t, to pa imaš prav ja. Se strinjam.