V niektorých prípadoch je užitočné ukázať užívateľovi nápovedu k formulárovému políčku priamo ako hodnotu políčka. Šetrí to priestor a pre užívateľov je to pohodlné a zrozumiteľné. Stačí na to pár riadkov JavaScriptu. Ale bacha, má to svoje drobné nástrahy.
Zhodou okolností na túto tému nedávno písal Thomas Fuchs v článku Using input values as hints, the easy way. Jeho riešenie je krásne a jednoduché. Ja osobne však v praxi používam niečo trošku komplikovanejšie.
Čo má skript robiť?
Skript by mal políčko asociovať s nejakou defaultnou hodnotou. Ak je políčko prázdne a neaktívne (nie je na ňom focus), defaultná hodnota by sa v ňom mala zobraziť zašednutá (alebo nejak inak vizuálne potlačená). Akonáhle užívateľ políčko vyplní alebo do neho chce niečo písať (políčko získa focus), malo by sa opäť správať štandardne.
Počas implementácie si hlavne treba dať pozor na jednu veci:
Pri submitnutí formulára treba skontrolovať, či užívateľ skutočne niečo do políčka vložil. Ak to neurobíš, budú sa ti na server posielať hinty z nevyplnených políčok. Samozrejme, môžeš si to ošetriť aj na stran servera. Je to na tebe.
Základ
Objekt ktorý sa mi o hint v políčku postará si nazvem FieldHint.
var FieldHint = Class.create({
initialize : function ( field, hint ) {
this.field = $( field );
this.hint = hint;
this.field.observe( 'focus', this.focus.bind( this ) );
this.field.observe( 'blur', this.blur.bind( this ) );
this.blur(); // inicializacne spustenie
},
focus : function () {
if ( this.field.value == this.hint ) {
this.field.value = '';
}
},
blur : function () {
if ( ( this.field.value == '' ) || ( this.field.value == this.hint ) ) {
this.field.value = this.hint;
}
}
});
Ošetrenie submitu
Pred odoslaním obsahu formuláru ešte treba zaistiť, aby sa neposlali aj hinty.
Toto síce vyzerá zložito, ale v skutočnosti na to už máš všetko čo potrebuješ (deje sa to v metóde focus()). Takže ju stačí pred submitom iba zavolať:
this.field.form.observe( 'submit', this.focus.bindAsEventListener( this ) );
Customizácia a formátovanie
Chýba posledná vec: Formátovanie políčka keď obsahuje hint (napr. šedý text) a nejaká jednoduchá možnosť customizácie.
var FieldHint = Class.create({
options : {
hintClass : 'hint'
},
initialize : function ( field, hint, options) {
this.field = $( field );
this.hint = hint;
Object.extend( this.options, options || {} );
this.field.observe( 'focus', this.focus.bind( this ) );
this.field.observe( 'blur', this.blur.bind( this ) );
this.field.form.observe( 'submit', this.focus.bindAsEventListener( this ) );
this.blur();
},
focus : function () {
this.field.removeClassName( this.options.hintClass );
if ( this.field.value == this.hint ) { this.field.value = ''; }
},
blur : function () {
if ( ( this.field.value == '' ) || ( this.field.value == this.hint ) ) {
this.field.addClassName( this.options.hintClass );
this.field.value = this.hint;
}
}
});
Praktická ukážka
Tip na ďalšie rozširovanie
Hinty v políčkach sa často používajú ako náhrada za labely, obzvlášť ak designer potrebuje šetriť miestom. Labely by sa dali jednoducho skryť pomocou CSS a následne použiť pri automatickej inicializácii hintov. Asi takto:
HTML
<label class="hint" for="idPolicka">label policka</label>
CSS
label.hint { display: none; }
JS
document.observe( 'dom:loaded', function () {
$$( 'label.hint' ).each( function ( elm ) {
new FieldHint( elm.for, elm.innerHTML );
} );
} )
