IT Laboratoř

K napsání tohoto skriptu mě inspiroval vertigo, jehož řešení se mi ne zcela líbilo. Budiž mu vzdát velký dík za inspiraci ;-). Takže teď už přejdeme k řešení. Mějme takový jednoduchý formulář:

<form>
<textarea style="width:350px; height:200px;" id="policko">
</textarea><br>
<div id="infobox" style="display: none">
Napsali jste: <input id="napsano" readonly><br>
Zbývá: <input id="zbyva" readonly>
</div>
</form>

V textarea budeme chtít hlídat znaky. Další políčka slouží k vypisování počtu zbývajících a již napsaných znaků. Oba mají přiřazen atribut readonly, takže uživatel je nebude moci měnit. Dále jsou oba inputy obaleny divem, který má nastaveno display: none. Tento div si zobrazíme až pomocí Javascriptu. Tím docílíme toho, že lidé s vypnutým Javascriptem tyto dva inputy vůbec neuvidí. Nicméně stále to není dokonalé, lidé s vypnutými CSS tyto inputy stále uvidí – to by šlo vyřešit tak, že samotné inputy vložíme do stránky pomocí Javascriptu.

Takže vše už máme připravené a zbývá už jen napsat javascriptovou funkci, která zařídí zbytek:

// Identifikatory textarea, kam je text psan
// a inputu, kde se vypisuji napsane znaky.
var policko = document.getElementById("policko");
var napsano = document.getElementById("napsano");
var zbyva = document.getElementById("zbyva");

// Div, ve kterem jsou inputy
var infobox = document.getElementById("infobox");

// Maximalni pocet znaku v policku
var maximum = 50;

// Má se po dosahnuti maxima zobrazit alert?
var vyskocit = false;

// Hlaska, ktera se zobrazi
var hlaska = "Maximální počet znaků je omezen na " + maximum + ".";

infobox.style.display = "block";
napsano.value = 0;
zbyva.value = maximum;

policko.onkeyup = function()
{
        pocet = policko.value.length;

        if(pocet > maximum)
        {
                policko.value = policko.value.substring(0, maximum);

                if(vyskocit)
                {
                        alert(hlaska);
                }
        }
        else
        {
                napsano.value = pocet;
                zbyva.value = maximum - pocet;
        }
}

Drobný komentář ke kódu: Na prvních řádcích se definují proměnné, které ukazují na textarea a na inputy. Ty mohou mít jakékoliv ID, stačí ho pak zapsat jako argument funkce getElementById. Například chcete-li počet již napsaných znaků vepisovat do inputu s identifikátorem „cauky“, změníte kód takto: var zbyva = document.getElementById("cauky");. Dále můžete nastavit identifikátor divu, který obaluje inputy, maximální počet znaků ve formuláři, jestli se má po dosáhnutí maxima zobrazit upozorňující alert a jaká hláška má případně vyskočit. O zbytek se už postará sám skript.

Vše si můžete prohlédnout na ukázkové stránce a případně si můžete stáhnout Javascriptový kód.

Aktualizace: Blbne to v Exploreru v quirk módu.