Tutoriál: Používateľské formuláre - automatické zameriavanie a výplňový text - placeholder, núdzové riešenia

Automatické zameriavanie sa na konkrétne pole formulára:

Vkladanie dát do formulára je možné urýchliť pomocou automatického zamerania kurzoru myšky do tej časti formulára, ktorú považujeme za najdôležitejšiu. Najčastejšie je to prvé pole formulára. V podstate ide o jednoduchú záležitosť. Do značky poľa, ktoré si vyberieme, umiestnime atribút autofocus.

V rámci jedného webového dokumentu môžeme umiestniť len jeden atribút autofocus. vykreslení formulára na stránke je kurzor v príslušnom poli, v ktorom je hneď možné zadávať údaje pomocou klávesnice.

Kód formulára:

 <form id="ucet" action="login.php" method="post">
 	<fieldset id="prihlasenie">
    	<legend>Vytvoriť nový účet</legend>
        <ol>
        	<li>
            	<label for="meno">meno</label>
                <input id="meno" type="text" name="meno" autofocus="true" placeholder="zadajte meno">
            </li>
            <li>
            	<label for="priezvisko">priezvisko</label>
                <input id="priezvisko" type="text" name="priezvisko" placeholder="zadajte priezvisko">
            </li>
            <li>
            	<label for="email">e-mail</label>
                <input id="email" type="text" name="email" placeholder="pouzivatel@mail.sk">
            </li>
            <li>
            	<label for="heslo">heslo</label>
                <input id="heslo" type="password" name="heslo" placeholder="8-10 znakov"
                value="" autocomplete="off">
            </li>
            <li>
            	<label for="heslo">potvrď heslo</label>
                <input id="potvrd_heslo" type="password" name="potvrd_heslo" value=""
                autocomplete="off" placeholder="opíšte heslo">
            </li>
            <li><input type="submit" value="prihlásiť sa"></li>
       </ol>
    </fieldset>       
 </form> 

Ako obvykle, nájdu sa internetové prehliadače, ktoré "ignorujú " atribút autofocus. Tento problém môžeme vyriešiť použitím JavaScriptu. Ide o núdzové riešenie, ktoré implementujeme do hlavičky webového dokumentu "head":

 <script type="text/javascript">
function podporujeAutofocus() {
  var element = document.createElement('input');
  return 'autofocus' in element;
}

$(function(){
   if(!podporujeAutofocus()){
     $('input[autofocus=true]').focus();
   }
});
 </script>

Automatické zameriavanie zjednoduší začiatok vyplňovania formulára používateľom. Tento JavaScript je možné napísať aj do externého súboru, ktorý pomenujeme napr. autofocus.js. Následne ho pripojíme pomocou linku v hlavičke dokumentu.

Výplňový text:
Placeholder poskytuje používateľovi v jednotlivých poliach formulára predpísaný text, ktorý slúži ako nápoveda. Pri kliknutí myšou do príslušného poľa a napísaním prvého písmena placeholder zmizne a pole je pripravené na zadávanie konkrétnych dát používateľov z klávesnice. Pri vymazaní údaja z poľa sa opäť zobrazí výplňový text.


Zabránenie automatickému dokončovaniu:

V našom prihlasovacom formulári sme pri textových poliach s heslom pridali nový atribút autocomplete a jeho hodnotu sme nastavili na off. Niektoré internetové prehliadače dopĺňajú do polí údaje, ktoré používateľ zadal v niektorom z predošlých polí. Po zapísaní prvého písmena automaticky doplní údaj. Ak použijeme atribút autocomplete a nastavíme jeho hodnotu na off, tento problém nenastane.
Aby náš formulár ako tak vyzeral aj z grafického hľadiska, jemne ho upravíme pomocou kaskádových štýlov CSS:

@charset "utf-8";
/* CSS Document */

fieldset {
	      width: 216px;
}
fieldset ol {
	         list-style: none;
			 padding: 0px;
			 margin: 2px;
}
fieldset ol li {
	            margin: 0 0 9px 0;
				padding: 0;
}
fieldset input {
	            display: block;
}

Poskytnutie nápovede pomocou výplňového textu použitím ActionScript:
Výplňový text vložíme do formulára pomocou atribútu placeholder. Ten ale nemusí fungovať vo všetkých prehliadačoch. Čiže - náš starý známy problém. Ako núdzové riešenie môžeme použiť ActionScript. Ten by mal fungovať bez rozdielu na tom, aký použijeme internetový prehliadač. Tento skript je možné zapísať do hlavičky head, alebo do externého súboru s prípojou .js, ktorú pomocou linky k webovému súboru pripojíme.

(function($){  
  $.fn.placeholder = function(){       
    function hodnotaJeVypln(vstup){
      return ($(vstup).val() == $(vstup).attr("placeholder"));
    }
    return this.each(function() {    
      $(this).find(":input").each(function(){      
        if($(this).attr("type") == "password"){          
          var nove_pole = $("");
          nove_pole.attr("rel", $(this).attr("id"));
          nove_pole.attr("value", $(this).attr("placeholder"));
          $(this).parent().append(nove_pole);
          nove_pole.hide();
          
          function ukazVyplHesla(vstup){
            if( $(vstup).val() == "" || hodnotaJeVypln(vstup) ){ 
              $(vstup).hide();
              $('input[rel=' + $(vstup).attr("id") + ']').show();
            };
          };          
          nove_pole.focus(function(){
            $(this).hide();
            $('input#' + $(this).attr("rel")).show().focus();
          });
          $(this).blur(function(){
             ukazVyplHesla(this, false);
          });
          ukazVyplHesla(this);         
        }else{          
           function ukazVypln(vstup, reload){
            if( $(vstup).val() == "" || 
              ( reload && hodnotaJeVypln(vstup) ) ){ 
                $(vstup).val($(vstup).attr("placeholder"));
              }
          };          
          $(this).focus(function(){
            if($(this).val() == $(this).attr("placeholder")){
              $(this).val("");
            };
          });
          $(this).blur(function(){
             ukazVypln($(this), false)
          });   
          ukazVypln(this, true); 
        };
      });
      
      $(this).submit(function(){  
        $(this).find(":input").each(function(){
          if($(this).val() == $(this).attr("placeholder")){
            $(this).val("");
          }          
        });
      });
      
    });  
  };
})(jQuery);

 

Výsledok:

Rubriky: