Eksempeltekst i inputfields

Tags:    html form input

Hej
Jeg er igang med at lave et loginsystem, som allerede virker lige som det skal. Dog vil jeg gerne have noget eksempel tekst i felterne username og password, ligesom der er ved loginsystemet her på udvikleren.dk.
Lige nu ser min formular således ud:
Fold kodeboks ind/udHTML kode 

Lige nu skal brugeren selv slette det der allerede står i felterne, hvilket ikke er så smart. Jeg fandt noget på nettet omkring mit problem, hvor der blev foreslået at jeg skrev
Fold kodeboks ind/udHTML kode 

i mit input-field, men det gav desværre ikke noget resultat.
Hvad kan jeg gøre for at det kommer til at virke, som jeg godt kunne tænke mig?



42 svar postet i denne tråd vises herunder
10 indlæg har modtaget i alt 38 karma
Sorter efter stemmer Sorter efter dato
Jeg bruger det her på min hjemmeside.

Fold kodeboks ind/udHTML kode 


Du kan prøve det oppe til højre på min hjemmeside : http://scootergrisen.dk/

Jeg prøvede også med placeholder attributten men skiftede tilbage da jeg hellere ville have det virkede i flere browsere.



Indlæg senest redigeret d. 18.04.2012 17:35 af Bruger #13010
nu har jeg ikke testet det her, men det må være noget i den her stil, hvis du vil lave et fallback hvis det er en browser uden HTML5.

Fold kodeboks ind/udHTML kode 

Fold kodeboks ind/udJScript kode 




Jeg tror lidt den druknede, så her kommer den lige igen.

En ren Javascript placeholder polyfill, med feature detection. Testet og virker i Webkit, Firefox og Opera. I må endelig gerne teste den for mig i IE og komme med rettelser om nødvendigt.

Fold kodeboks ind/udJScript kode 




Man kan bruge placeholder som de andre nævner. ellers skal du have gang i noget javascript:

Ved ikke helt om du kan bruge dette, ellers skal du selv kode det :)
http://unwrongest.com/projects/defaultvalue/



@Gustav det er selvfølgelig rigtigt, men så syntes jeg også det er overkill, at loade yepnope til, at hente 1 fil. Hvorfor så ikke bare hente filen med jQuery's $.getscript ... hvis han alligevel bruger jQuery. yepnope hjælper jo ikke med, at checke om placeholder understøttes ;)



Du har ret igen :-)

Så mit bud, på vores fælles bud, ser cirka sådan her ud:
Fold kodeboks ind/udJScript kode 


Men...

Det tager jo tid at loade det asynkront og et placeholder polyfill, burde ikke fylde ret meget. Desuden er det jo vigtigt, at placeholder værdier vises med det samme, hvis man bruger dem som labels for sine felter, så de er der, selv hvis man har en bruger der med det samme går i gang med at bruge felterne. Derfor burde jo lave det inline, så superbrugerne ikke skal vente på at det bliver hentet efter page load. Desuden bør det jo ikke afhænge af jQuery - det er jo et stort library, og det er et simpelt problem vi har.

Fold kodeboks ind/udJScript kode 


Så skal det jo bare minifies... :p

Test på jsFiddle: http://jsfiddle.net/REqUH/



Indlæg senest redigeret d. 19.04.2012 09:33 af Bruger #17015
Så vil jeg sku også lave en version!

Fold kodeboks ind/udHTML kode 


Fold kodeboks ind/udJScript kode 


Fold kodeboks ind/udCSS kode 


Resultatet



Indlæg senest redigeret d. 20.04.2012 00:20 af Bruger #17081
placeholder attributten er en del af HTML 5 og understøttes derfor ikke nødvendigvis af alle browsere endnu, og slet ikke tidligere versioner. Jeg ville personligt nok holde mig til noget JavaScript lidt endnu, om ikke andet så i hvert fald som fallback.

Mvh.

Kasper (TSW)



prøv at ændre sætningen e.target.value = null til e.target.value = ''

Det der sker er nok at ie tror det er en string null og ikke værdien null. Derfor prøver vi med en tom streng - da det burde have samme resultat...



Sidste revidering af omtalte kode, for referencens skyld.

Fold kodeboks ind/udJScript kode 


@Kenneth, Det var godt :-) Selv tak!



t