[JS/HTML] input type wijzigen met Javascript

[Verwijderd]

Ik wil graag een formuliertje maken om te kunnen inloggen. In het formulier staat dus een veld met een gebruikersnaam en een veld met een wachtwoord. Het veld met de gebruikersnaam heeft als waarde 'gebruikersnaam' en dit wordt door javascript gewist als het veld wordt 'gefocused' zodat het veld leeg is en de gebruikersnaam kan worden ingevuld. Hetzelfde geldt voor het veld met het wachtwoord. Maar omdat dit veld een wachtwoord, heeft is het type van dit veld dus 'password' ipv 'text'.

Wat is nu het probleem? Dat zal wel duidelijk zijn, omdat het type van het veld 'password' is wordt de tekst wachtwoord ook als wachtwoord getoond in het veld. Ik heb deze tekst erin staan omdat de gebruiker dan weet wat hij daar in moet voeren (er is beperkte ruimte omdat het formulier onderaan het menu staat dat nogal smal is en het is op deze manier een mooie oplossing dacht ik).

Ik heb nu ongeveer de oplossing. Ik ben van plan om het type van het veld gewoon 'text' te geven zodat de tekst 'wachtwoord' juist wordt getoond. Maar op het moment van 'focussen' van het veld wil ik dat het type van de textbox 'password' wordt zodat het wachtwoord dat wordt ingetypt juist wordt weergegeven (dus balletjes/sterretjes). En daar kom ik niet uit hoe ik dat met Javascript moet doen. Ik heb de search op GoT geraadpleegt en Google, maar kon het antwoord niet vinden.

[André]

Volgens mij kun je het type van een form-element niet veranderen. Kun je niet gewoon zoiets doen:

code:

Log in: [        ] - [        ]

[Verwijderd]

André schreef op 10 mei 2004 @ 22:13:
Volgens mij kun je het type van een form-element niet veranderen. Kun je niet gewoon zoiets doen:

code:

Log in: [        ] - [        ]

Ik begrijp je oplossing eerlijk gezegd niet zo

[Verwijderd]

Probeer eens te kijken naar key en mouse events. Replace initieel alle karakters naar *, en bij focus uit een buffer die je hebt gevuld met de originele string

[Verwijderd]

Ik moet eerlijk zeggen dat ik alleen standaard javascript een beetje ken. Maar ik gebruik voor de waarde (value) van de textbox in javascript 'document.formname.objectname.value'. Is er niet een soortgelijk iets voor het type van het object?

[André]

Verwijderd schreef op 10 mei 2004 @ 22:14:
[...]

Ik begrijp je oplossing eerlijk gezegd niet zo

Daar bedoel ik 2 tekstvakken naast elkaar mee, het is voor iedereen wel duidelijk dat daar altijd een user/pass combi ingevuld moet worden.

Verwijderd schreef op 10 mei 2004 @ 22:23:
Ik moet eerlijk zeggen dat ik alleen standaard javascript een beetje ken. Maar ik gebruik voor de waarde (value) van de textbox in javascript 'document.formname.objectname.value'. Is er niet een soortgelijk iets voor het type van het object?

Het is eigenlijk netter om:

JavaScript:

document.forms["formname"].elements["objectname"].value

te doen.

En zoals ik al zei kun je de type niet veranderen.

[ Voor 47% gewijzigd door André op 10-05-2004 22:26 ]

[djluc]

André gaat er vanuit dat de gebruiker snap waar het wachtwoord en de gebruiksnaam moeten komen te staan. Als ik je startpost moet geloven is dit echter niet zo. De inhoud van een passwordveld kan je niet veranderen. Daarom is de opzet van gordijnstok een goede mogelijkheid. "Replace initieel alle karakters naar *," lijkt me alleen niet zo handig aangezien je dan hetzelfde ziet als in een passwordveld. Je moet het woord wachtwoord gewoon laten zien en bij een onfocus ga je het veld leegmaken en vervolgens alle nieuwe tekens tonen als sterretjes.

Wat mij echter veel eenvoudiger lijkt: een standaard tekstveld plaatsen. Zodra deze de focus krijgt laat je een tot nu toe verborgen leeg wachtwoordveld zien en geef je deze de focus.
ongetest en misschien zelfs deels onvolledig:

HTML:

<input type="text" value="wachtwoord" id="fakeveld" onFocus="
document.getElementById('wachtwoordveld').style.display='block';
document.getElementById('fakeveld').style.display='none';
document.getElementById('wachtwoordveld').focus();">
<input type="password" id="wachtwoordveld" style="display:none;">

[ Voor 36% gewijzigd door djluc op 10-05-2004 22:29 ]

[AkaXakA]

wat je wil is volgens mij dit:

code:

<label for="name">name:</label>

  <input type="text"  name="name"  value="gebruikersnaam"  />

<label for="passwd">password:</label>

  <input type="password" name="passwd" value="paswoord" />

Je moet dus type="text" en type="password" houden....om text erin te krijgen moet je gewoon wat bij value invullen.

Tenminste...ik hoop dat dit is wat je bedoelt

[djluc]

AkaXakA schreef op 10 mei 2004 @ 22:29:Tenminste...ik hoop dat dit is wat je bedoelt

Probeer nu eens te lezen wat er in password staat.

[André]

AkaXakA schreef op 10 mei 2004 @ 22:29:
wat je wil is volgens mij dit:

code:

<label for="name">name:</label>

  <input type="text"  name="name"  value="gebruikersnaam"  />

<label for="passwd">password:</label>

  <input type="password" name="passwd" value="paswoord" />

Je moet dus type="text" en type="password" houden....om text erin te krijgen moet je gewoon wat bij value invullen.

Tenminste...ik hoop dat dit is wat je bedoelt

Nee. Hij wil eerst een tekst in het wachtwoord veld hebben, en op het moment van typen moeten dit sterretjes zijn.

[Verwijderd]

AkaXakA schreef op 10 mei 2004 @ 22:29:
wat je wil is volgens mij dit:

code:

<label for="name">name:</label>

  <input type="text"  name="name"  value="gebruikersnaam"  />

<label for="passwd">password:</label>

  <input type="password" name="passwd" value="paswoord" />

Je moet dus type="text" en type="password" houden....om text erin te krijgen moet je gewoon wat bij value invullen.

Tenminste...ik hoop dat dit is wat je bedoelt

Dit is dus wat ik nu heb, maar op deze manier wordt 'paswoord' (de value) getoond als een password en daar heb je dus niets aan en dat is wat ik wil veranderen. Daarom moet je volgensmij switchen tussen twee verschillende types voor het textfield.

[Verwijderd]

djluc schreef op 10 mei 2004 @ 22:24:

HTML:

<input type="text" value="wachtwoord" id="fakeveld" onFocus="
document.getElementById('wachtwoordveld').style.display='block';
document.getElementById('fakeveld').style.display='none';
document.getElementById('wachtwoordveld').focus();">
<input type="password" id="wachtwoordveld" style="display:none;">

Als je nu een beetje snel typt, dan wordt dit zeker een 'zootje' of niet?

[André]

Verwijderd schreef op 10 mei 2004 @ 22:34:
[...]

Als je nu een beetje snel typt, dan wordt dit zeker een 'zootje' of niet?

Nee, op het moment van focussen (dat is 1 keer) switched hij even.

[Verwijderd]

Het idee van djluc werkt op zich wel, alleen verspringt het veld natuurlijk omdat hij niet op de plek van het andere veld kan staan. Eerlijk gezegd dus niet echt een nette oplossing, al vind ik het idee wel leuk

edit:

Verwijderd schreef op 10 mei 2004 @ 22:15:
Probeer eens te kijken naar key en mouse events. Replace initieel alle karakters naar *, en bij focus uit een buffer die je hebt gevuld met de originele string

En daarom zit ik nu hieraan te denken. Javascript moet dus het volgende doen als de focus op dit veld komt:
- wis het veld
- als een teken wordt ingevoerd, voeg dit dan toe aan een variabele (een string)
- zet de waarde van de string in een hidden field dat deel uitmaakt van het formulier
- verwijder het ingevoerde teken uit het tekstvak en plaats een *

wie kan mij hierbij verder helpen? zoals ik al zie ben ik geen gevordere javascripter, maar het lukt me niet met php of html

[ Voor 65% gewijzigd door Verwijderd op 10-05-2004 22:49 ]

[djluc]

Verwijderd schreef op 10 mei 2004 @ 22:44:
Het idee van djluc werkt op zich wel, alleen verspringt het veld natuurlijk omdat hij niet op de plek van het andere veld kan staan. Eerlijk gezegd dus niet echt een nette oplossing, al vind ik het idee wel leuk

Heb je het getest? Als je nou even goed leest zie je dat het tekstveld onzichtbaar gemaakt wordt

Ik heb het net zelf even getest en het werkt gewoonweg helemaal goed.

offtopic:
Om de layout niet te verpesten heb ik er trouwens enters tussen gezet maar deze mogen er natuurlijk tussenuit. Mét werkt het echter ook bij mij.

[ Voor 24% gewijzigd door djluc op 10-05-2004 23:22 ]

[Verwijderd]

djluc schreef op 10 mei 2004 @ 23:19:
[...]
Heb je het getest? Als je nou even goed leest zie je dat het tekstveld onzichtbaar gemaakt wordt

Ik heb het net zelf even getest en het werkt gewoonweg helemaal goed.

offtopic:
Om de layout niet te verpesten heb ik er trouwens enters tussen gezet maar deze mogen er natuurlijk tussenuit. Mét werkt het echter ook bij mij.

Natuurlijk heb ik het getest, ik zag het ook als de oplossing van het probleem Ik zie ook dat het tekstveld onzichtbaar wordt en er komt idd een nieuw tekstveld waar het wachtwoord in wordt getypt (met sterretjes/bolletjes) alleen komt dit nieuwe veld onder het andere tekstveld (dat verdwijnt). Maar ik zal even kijken waar het aan ligt, misschien idd wat returns ertussen.

[André]

Verwijderd schreef op 11 mei 2004 @ 08:41:
[...]

Natuurlijk heb ik het getest, ik zag het ook als de oplossing van het probleem Ik zie ook dat het tekstveld onzichtbaar wordt en er komt idd een nieuw tekstveld waar het wachtwoord in wordt getypt (met sterretjes/bolletjes) alleen komt dit nieuwe veld onder het andere tekstveld (dat verdwijnt). Maar ik zal even kijken waar het aan ligt, misschien idd wat returns ertussen.

Dan zet je die 2 tekstvelden toch over elkaar heen:

HTML:

<div style="position:relative">
  <input type="text" style="position:absolute;left:0px;top:0px;">
  <input type="password" style="position:absolute;left:0px;top:0px;">
</div>

[Verwijderd]

André schreef op 11 mei 2004 @ 08:46:
[...]

Dan zet je die 2 tekstvelden toch over elkaar heen:

HTML:

<div style="position:relative">
  <input type="text" style="position:absolute;left:0px;top:0px;">
  <input type="password" style="position:absolute;left:0px;top:0px;">
</div>

Nu werkt het dus wel

Alleen zit ik nog met een heel klein probleempje

Een veld van het type password is smaller dan het een veld van het type text, dus het vak wordt nu zichtbaar smaller.

edit: laat maar, dat kan natuurlijk met style (width=x) (te laat )

Iedereen bedankt!

_{Ja, idd het is een beetje gezeur maar ik wil het nu wel perfect hebben}

[ Voor 22% gewijzigd door Verwijderd op 11-05-2004 09:05 ]

[André]

HTML:

<div style="position:relative">
  <input type="text" style="position:absolute;left:0px;top:0px;width:100px;">
  <input type="password" style="position:absolute;left:0px;top:0px;width:100px;">
</div>