login  Naam:   Wachtwoord: 
Registreer je!
 Forum

onfocus en onblur password element

Offline JLT - 26/12/2009 16:33
Avatar van JLTPHP interesse Beetje moeilijk te omschrijven, maar ik loop tegen het volgende aan:

Ik heb een inlog formulier en wil in de form elementen aangeven wat er ingevuld moet worden. Nu is me dat gelukt bij gebruikersnaam met onderstaand script. Als ik dit bij het wachtwoordveld doe staan er natuurlijk alleen maar puntjes i.p.v. wachtwoord

Script
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <input style="color: #f00" type="text" value="Your email" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Your email'}" onfocus="if (this.value == 'Your email') {this.style.color='#0f0'; this.value=''}" />


Heeft iemand hier een oplossing voor?

9 antwoorden

Gesponsorde links
Offline MiST - 26/12/2009 18:06
Avatar van MiST Lid maak de achtergrond van je veld rood ipv je tekst? dat valt toch al genoeg op, nee? 
Offline Kevin - 26/12/2009 19:03
Avatar van Kevin Crew Ajax/REST Ben het eens met MiST. Een andere optie is een div plaatsen naast je velden en daarin de boodschap plaatsen wanneer het verplichte veld niet of niet juist is ingevuld.
Offline JLT - 27/12/2009 14:19
Avatar van JLT PHP interesse Misschien ben ik niet helemaal duidelijk geweest.  Het gaat mij niet om de kleur, maar om de tekst in het form element. Ik heb voor de duidelijkheid even een screenshot geupload naar m'n website.

voorbeeld

Zoals je daar kan zien staat het woord 'wachtwoord' in puntjes en dat wil ik natuurlijk gewoon in letters hebben staan. En ik was vergeten te zeggen dat ik geen ervaring heb met Javascript  

Nog meer suggesties??
Offline TotempaaltJ - 27/12/2009 21:26 (laatste wijziging 27/12/2009 21:26)
Avatar van TotempaaltJ PHP interesse Helemaal 

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <input style="color: #f00" type="text" value="Your email" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Your email'; this.type='Text'}" onfocus="if (this.value == 'Your email') {this.style.color='#0f0'; this.value=''; this.type='password'}" />
Offline JLT - 28/12/2009 10:12 (laatste wijziging 28/12/2009 16:02)
Avatar van JLT PHP interesse Het werkte goed in Chrome en Firefox, maar je raad het al Explorer weigert weer eens. Wat een enorme *** browser :-s

Je kan het wachtwoord lezen net als het woord 'wachtwoord'. Is er misschien een andere oplossing?
Offline TotempaaltJ - 28/12/2009 16:43
Avatar van TotempaaltJ PHP interesse Microsoft moet daar echt 's wat aan doen... Ik denk niet dat je het anders zou kunnen oplossen... Maar wel een ding:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <input style="color: #f00" type="text" value="Your email" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Your email'; this.type='Text'; }" onfocus="if (this.value == 'Your email') {this.style.color='#0f0'; this.value=''; this.type='password'; }" />

Er zat een miniscuul klein zinloos het-maakt-toch-niks-uit foutje in. Probeer eens? 
Offline Richard - 28/12/2009 17:17
Avatar van Richard Crew algemeen Zo gek is het eigenlijk niet dat je het type niet kunt veranderen. Sowieso moet je nooit hoeven vertrouwen op JavaScript voor zoiets, dus ik zou een achtergrondafbeelding gebruiken om je tekst weer te geven en die met JavaScript weg te halen. Dan staat het er misschien wel altijd als je geen JavaScript-ondersteuning hebt, maar het *staat* er wel.
Offline TotempaaltJ - 28/12/2009 17:59 (laatste wijziging 28/12/2009 18:00)
Avatar van TotempaaltJ PHP interesse Als we toch incompatiblity gaan doen, laten we meteen voor de zekerheid met een div en CSS het er nog achter zetten voor mobile-gebruikers. Maar wacht, dat kan natuurlijk ook niet, want wat nou als je geen CSS ondersteuning hebt? 

Anyway, je kan voor de zekerheid natuurlijk dit in je header/pagina zetten:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById('passinput').type = 'password';

en dan van je password veld dit maken:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <input style="color: #f00" type="password" id="passinput" value="Your email" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Your email'; this.type='Text'; }" onfocus="if (this.value == 'Your email') {this.style.color='#0f0'; this.value=''; this.type='password'; }" />

Dit zorgt ervoor dat als je geen Javascript ondesteuning hebt het gewoon een password veld blijft met die sterretjes er in. 
Offline JLT - 29/12/2009 09:42 (laatste wijziging 29/12/2009 12:12)
Avatar van JLT PHP interesse Hey Bigboss.... Thanks, maar het is geen echte oplossing. Eplorer laat nu wel de puntjes zien, maar ja je hebt altijd mensen die dit niet snappen of denken dat het wachtwoord al is ingevuld.

In de donkere gewelven van Google kwam ik jquery tegen die werkt met een achtergrondplaatje. Ik heb totaal geen ervaring met jquery maar het moet er maar eens van komen.... Ik laat het even weten als het gelukt is.

watermark met jquery


[ update ]

Ik ben gestopt met het zoeken naar een oplossing. Bovenstaande jquery watermark werkt wel, ook in explorer. Maar.... weer niet in de oudere explores. Kortom geen optie.

Een betere optie: gewoon boven de velden gebruikersnaam en wachtwoord plaatsen. Is het voor iedereen te zien. Zucht!!
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.242s