[JS] Input type veranderen naar password

[Optix]

Hallo,

Ik heb het volgende gefabriceerd:

code:

<input style="height:16px;" name="login[password]" type="text" value="Password..." onclick="resetField(this);" onkeyup="resetField(this);" size="12" >

JavaScript:

function resetField(elm) 
{

    if(elm.value == 'Password...' && elm.type == 'text') elm.type = 'password';
                
    checkValue = elm.value.split('...');
                
    if(checkValue.length > 1) elm.value = '';

}
 

Op deze manier staat er een input field met de waarde "Password..." zodat je weet dat je daar password moet invullen, nou is het de bedoeling dat als je het wil gaan invullen dat de value verdwijt en (als waarde "Password...") het input field type password word.

Nou werkt dit wel in FF maar niet in IE

Is hier een andere oplossing voor te vinden of wil ik gewoon weer eens iets wat IE niet toelaat...

[RobIII]

Waar hoort mijn topic?

>> WEB

Waarom doe je in godsnaam een split?

crisp schreef op zondag 08 oktober 2006 @ 23:52:
inderdaad, in IE kan je niet dynamisch de type van een input-element wijzigen.

Dat wist ik niet Weer wat geleerd

[ Voor 81% gewijzigd door RobIII op 08-10-2006 23:53 ]

[Victor]

Vervang het hele element door een input element met als type password?

[crisp]

inderdaad, in IE kan je niet dynamisch de type van een input-element wijzigen.

[avon]

Je zou de inhoud eerst in een andere hidden variable kunnen zetten en dan laten vervangen door ******* in het zichtbare gedeelte.

[Optix]

RobIII schreef op zondag 08 oktober 2006 @ 23:51:
Waar hoort mijn topic?

>> WEB

Oeps!

King_Louie schreef op zondag 08 oktober 2006 @ 23:51:
Vervang het hele element door een input element met als type password?

Hoe zou je dat doen...? Hoe bedoel je?
Ik kan in een div plaatsen, met onclick div leeggooien en vullen met een input type=password...

[ Voor 17% gewijzigd door Optix op 08-10-2006 23:59 ]

[RobIII]

AvOn schreef op zondag 08 oktober 2006 @ 23:53:
Je zou de inhoud eerst in een andere hidden variable kunnen zetten en dan laten vervangen door ******* in het zichtbare gedeelte.

Imho nogal een ranzige oplossing. Ik zou gewoon gaan voor een hidden password box en die visible maken (en de textbox invisible...duh) op het gewenste moment. Of via wat JS rechtstreeks in de DOM hangen. Wel jammer dat dit (volgens de geleerden ) een IE "bug" is en dat je er dus uberhaupt zo omheen moet werken.

NightFade schreef op zondag 08 oktober 2006 @ 23:54:
Hoe zou je dat doen...?

Wat heb je al geprobeerd, gezocht, gevonden?

[ Voor 25% gewijzigd door RobIII op 08-10-2006 23:58 ]

[Victor]

NightFade schreef op zondag 08 oktober 2006 @ 23:54:
[...]


Oeps!


[...]

Hoe zou je dat doen...? Hoe bedoel je?

JavaScript:

function replaceField(field) {
    var password = document.createElement("input");
    password.type = "password";
    password.name = field.name;
    field.parentNode.replaceChild(password, field);
}

[avon]

Je zou ook voor de input box kunnen zetten "Wachtwoord: ", maar een nette oplossing is er denk ik niet.

offtopic:
[quote]een IE "bug" is en dat je er dus uberhaupt zo omheen moet werken.[/quote]

Haha; CSS bugje hier JS bugje daar. Laatst sprongen de tranen mij in de ogen toen ik een website zag in Safari. Daar blijkt table-layout:fixed nogal heftige effecten op te leveren.

[Optix]

AvOn schreef op maandag 09 oktober 2006 @ 00:02:
Je zou ook voor de input box kunnen zetten "Wachtwoord: ", maar een nette oplossing is er denk ik niet.

Dat was nou juist wat ik niet wou (om ruimte te besparen)

King_Louie schreef op maandag 09 oktober 2006 @ 00:00:
[...]

JavaScript:

function replaceField(field) {
    var password = document.createElement("input");
    password.type = "password";
    password.name = field.name;
    field.parentNode.replaceChild(password, field);
}

That does the trick!
Thanks

[ Voor 20% gewijzigd door Optix op 09-10-2006 00:09 ]

[Z500]

Ik heb deze ook gebruikt, echter werkt het maar af en toe, nadat ik vaak refreshed en naar andere pagina's gaat werkt het niet meer.

Iemand hiermee bekend? Alvast bedankt.

[BtM909]

Maak even een nieuw topic aan, waarin je ook even uitlegt hoe je het gebruikt. Het kan namelijk ook geheel aan je aanroep liggen, want de functie hierboven zou gewoon moeten werken.

[Verwijderd]

Je kan ook het woord "Password" als gifje de background-image maken van het password field en dat weghalen als je het focus geeft.

[Z500]

oke heb het scriptje nu werkend, alleen als ik erop klik en het veld word leeg, dan verliest hij ook de focus, dus moet ik opnieuw klikken voordat ik iets kan typen, is hier ook iets tegen te doen?

Bedankt.

[Cartman!]

element.focus();

Beetje zoeken kan geen kwaad hoor...

[7.01D]

De fraaiste methode is toch die beschreven wordt in Making compact forms more accessible op A List Apart.
Daarbij wordt geen gebruik gemaakt van een default value, maar wordt het label over de <input> geplaatst d.m.v. CSS en JavaScript. Dit werkt voor zowel type="text" als type="password" en is onubtrusive (als JS disabled is staat je label weliswaar voor of boven je <input> i.p.v. dat het er boven hovert, maar de input is al wel zichtbaar en voorzien van het juiste type-attribuut).

[Z500]

Cartman! schreef op vrijdag 14 december 2007 @ 20:35:
element.focus();

Beetje zoeken kan geen kwaad hoor...

Hoi,

Ja ik heb niet zoveel verstand van java, had wel zoiets gevonden, maar ik weet niet hoe ik het in de code hierboven moet toepassen. Heb al wel vanalles geprobeerd zonder succes. Dus als je weet hoe dat moet? Bedankt

[killercow]

Z500 schreef op woensdag 19 december 2007 @ 16:35:
[...]


Hoi,

Ja ik heb niet zoveel verstand van java, had wel zoiets gevonden, maar ik weet niet hoe ik het in de code hierboven moet toepassen. Heb al wel vanalles geprobeerd zonder succes. Dus als je weet hoe dat moet? Bedankt

zoeken naar javascript ipv java helpt al t zijn 2 verschillende dingen die niks met elkaar te maken hebben.

onFocus is een event handler welke je op een element toepast om een bepaald stuk code uit te voeren.

[Z500]

Ik heb gezocht en van alles geprobeerd. Maar ik krijg het echt niet voor elkaar, de browser geeft ook elke keer een foutmelding. Waar moet ik het toepassen, ik neem aan in de javascript, of toch de code? Behalve dat het de focus verliest werkt het goed

[Cartman!]

http://developer.mozilla.org/en/docs/DOM:element.focus
http://www.java2s.com/Cod...t/Setfocustoanelement.htm

Serieus, leer zoeken... ik heb je al de syntax gegeven hoe het werkt een paar posts geleden.

[Z500]

Ben dat al tegen gekomen, en heb het geprobeerd, dan heeft het dus gewoon niet gewerkt... raar.

[klaaz]

Dat komt waarschijnlijk omdat het veld zelf nog niet vervangen is. Zet er een kleine tijdvertraging op door deze regel toe te voegen:

setTimeout(function(){password.focus()}, 10);

Ik zat met het zelfde probleem en kwam naar lang zoeken er achter dat dit de oplossing is, voor mij althans.

[Verwijderd]

Die tijdsvertraging is geen goede oplossing. Dit is zeer afhankelijk van de snelheid van de PC en JavaScript engine. Beter zou zijn eerst de status te checken en daarna aan te passen.