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
@dan

Jeg bestemmer ikke navnet på pluginet? :D jeg ved bare at pluginet hedder jQuery Watermark, og så skrev jeg bare "Google er din ven", så folk kan lære at bruge google (y)..

Jeg kunne også ligeså godt have skrevet et direkte link.

Dog vil jeg sige at placeholder og watermark ikke er det samme. Det plugin jeg refererer til er også kompatibelt med ældre browsere som ikke understøtter HTML5 (i dette tilfælde placeholder tagget). Dvs. hvis browseren understøtter html5, så oversætter pluginet direkte til html5, hvis ikke browseren understøtter html5, så laver pluginet arbejdet selv.



@Stig, jQuery Watermark ser ret bloated ud. Jeg vil til enhver tid foretrække et minimalistisk polyfill. Den lille stump kode jeg har skrevet tidligere gør at browsere som ikke understøtter placeholder attributten kan forstå, og bruge, den nu.



@Gustav
Nu har jeg ikke nærlæst sourcecode for Watermark, men bl.a. ved jeg også at der er andre features inkluderet i plugin'et som også kunne bruges (fx ændring af tekstfarve, etc.). Men ellers har du ret, at selve funktionaliteten, kernen i det, burde være den samme i din stump kode i forhold til Watermark her.



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 


@Gustav, det virker også fint i chrome og firefox her, men i IE kommer der intet i feltet. For at det virkede lavede jeg et lille test-site hvor jeg lagde det ind.
Men når jeg så prøver på det site hvor det skulle finde anvendelse, så går det igen galt. Kan det have noget at gøre med at min form bliver indsat med php include?
I mit test-site havde jeg nemlig kun min form med input fields og det virkede fint.



Grunden til at det kan virke i chrome og firefox er at de slet ikke skal bruge scriptet - de understøtter placeholder uden scripts. Så at IE ikke virker, betyder enten at IE ikke kan fortolke Javascript koden eller at det ikke er på den side hvor du forsøger at bruge det.

For at udelukke det første, kan du prøve at sætte selve scriptet i en <script> lige efter den formular hvor du vil bruge det.

@Jens, det jeg mente var at jeg synes der var en masse overflødige ting i jQuery Watermark, hvis man bare vil have placeholder tekst...



Indlæg senest redigeret d. 21.04.2012 09:54 af Bruger #17015
Jeg har prøvet at sætte scriptet både før og efter min form og det gav samme resultat.
Grunden til at jeg bruger php include er for at slippe for at skulle lave ændringer 20 steder, men i stedet skal jeg kun et sted hen. Måske skulle prøve at placere scriptet i <head> på alle mine sider hvor jeg har inkluderet min form og se om det hjælper?

EDIT: Gustav, dit script har hele tiden virket hos mig også, jeg havde bare indsat det i den forkerte fil. Havde glemt at slette login.php efter at have indsat form i menu.php :$
Koden virker nu også til dels i IE9. Den skriver så godt nok bare "null" i stedet for at gøre feltet tomt



Indlæg senest redigeret d. 21.04.2012 11:01 af Bruger #17072
@Gustav, Problem solved :)
Jeg takker mange gange for hjælpen alle sammen :)



Indlæg senest redigeret d. 21.04.2012 14:23 af Bruger #17072
@Gustav. Havde lige muligheden for at teste scriptet i IE8, da jeg kun har Windows 7 med IE9, og kunne låne en WinXp computer med IE8, hvor det ikke virkede. Da fungerede det ligesom hvis jeg havde brugt value i stedet for placeholder. Her burde scriptet jo sørge for at den forstår hvad placeholder er, men det gør den ikke.



@Kenneth, det er præcis det som scriptet gør hvis der ikke er placeholder understøttelse. Hvis der ikke er nogen value i feltet vises placeholder. hvis feltet bliver fokuseret fjernes placeholder fra value - hvis den har value == placeholder.

Du kunne lave en mere avanceret løsning, men jeg tror alligevel ikke at folk der ikke gider opgradere deres browsere sætter pris på den slags.



Hvor ville jeg skulle placere value == placeholder i det script du har postet ovenfor?



t