Azt hiszem nem sokan ismerik a beviteli elemek (<input/> és <textarea/>) már 2000-ben DOM által specifikált, és a böngészők által is támogatott egyik lehetőségét, a defaultValue (és defaultChecked) tulajdonságát. Ha beviteli mezőkbe szeretnénk példa vagy súgó szöveget elhelyezni amíg azok nem kerülnek szerkesztésre, akkor ezek a tulajdonságok sokat segíthetnek.
Az input és textarea elemek defaultValue tulajdonsága azt az értéket tartalmazza, mely a value segítségével eredetileg be volt állítva (vagy pedig amit korábban beállítottunk – írható érték). Ezt tudjuk kihasználni egy súgószöveg elhelyezésére:
<input id="email" type="text" value="ide írjad az email címed" />
Majd pedig hozzárendelünk JavaScript eseménykezelést:
var iEmail = document.getElementById("email");
iEmail.onfocus = function() {
if (this.value == this.defaultValue) {
this.value = "";
}
}
iEmail.onblur = function() {
if (this.value == "") {
this.value = this.defaultValue;
}
}
Ha az input mező fókuszba kerül, és a súgószöveg az értéke, akkor töröljük azt, ha elveszti a fókuszt, és még nem írt bele a felhasználó semmit, akkor pedig visszaállítjuk az eredeti értéket.
Két dolgot lehet még javítani a kódon. Az egyik, hogy alapból adunk egy class="default" osztályt az elemnek, ami felel a szöveg elszürkítéséért (color: #888; – vagy bármilyen más módon jelzi a felhasználó számára, hogy ezt nem ő írta be. Ezután a fókuszkor nem az egyezőséget, hanem ennek az osztálynak a meglétét kell ellenőrizni (JS kódkönyvtártól függő módon vannak erre függvények, pl. this.hasClass("default")), és ha megvan akkor leszedni, fókusz elvesztésekor pedig ha üres volt a mező értéke, akkor az érték visszaállítása mellett visszaállítani az osztályt is (this.removeClass("default") és this.addClass("default")). Ezzel azt a hibalehetőséget is megoldjuk, ha a felhasználó ugyanazt az értéket írja be, mint ami a súgószövegünk volt.
A másik javítási irány a form elküldésekor a súgószövegek eltüntetése az input mezőből, ez kiegészíthető a mező kitöltésének ellenőrzésével, kliens oldali validációval is persze. A szerver oldali validációt lehet, hogy célszerű kiegészíteni a súgószövegre szűréssel is.
A defaultValue mind input, mint textarea esetében működőképes, sőt, a defaultChecked segítségével rádiógombok, checkboxok esetén is lekérdezhető az alapbeállítás (már kérdés, hogy ott nincs sok értelme a fent leírt módszernek).
Jó, trükk köszi
Annyit tennék hozzá, hogy esetleg a defaultValue értékét is érdemes lehet JavaScripttel megadni domcontentloaded-re, mert sokszor látni olyat, hogy van mondjuk 2 default érték egy login formban, amit submitra elküld (értelmetlenül).
Egy másik dolog merült fel bennem még – mi történik, ha mondjuk login/password mezőkről van szó és a böngészőben megjegyeztettem az értékeket? Ilyenkor mindig a böngésző “győz”?
yaanno: A defaultValue állítgatása semmilyen látható változást nem okoz, tehát a felhasználónév+jelszó párosokhoz nincsen köze. Azok kitöltése a tapasztalataim szerint csak akkor történik meg, ha a mező
valueértéke az oldal betöltődésekor üres.Ide passzol még az, amikor kitöltesz egy mezőt, és vagy újratöltöd az oldalt egy sima frissítéssel, vagy elnavigálsz róla, de a Vissza gombbal visszatérsz. Ekkor a mező újratöltés/elnavigálás előtti állapota fog látszódni, de ez sem befolyásolja a
defaultValueértéket. Amit bizonyos körülmények között érdemes lehet megtenni, az az oldal betöltődésekor a mezővaluetulajdonságának felülírása adefaultValueértékkel, megelőzve azt, hogy a frissítés/elnavigálás előtti állapota látszódjon (de ez persze nem mindig célszerű).András: Á igen, így már OK, értem.