Vyberte volbu Vložit > Spry > Ověření textové oblasti Spry.
Naposledy aktualizováno
May 19, 2021 06:51:51 PM GMT
Poznámka:
Widgety Spry jsou v aplikaci Dreamweaver CC a novější nahrazeny widgety jQuery. Stávající widgety Spry na stránce sice můžete upravit, ale nemůžete přidávat nové.
O widgetu Ověření textové oblasti
widget Ověření textové oblasti Spry je textová oblast, která, když uživatel zadá několik vět textu, zobrazí platné nebo neplatné stavy. Pokud je textová oblast vyžadované pole a uživatel nezadá text, widget vrátí zprávu, že je vyžadována hodnota.
Následující příklad zobrazuje widget Ověření textové oblasti v různých stavech:
A. Počítadlo zbývajících znaků B. Aktivní widget Textová oblast, stav maximální počet znaků C. Aktivní widget Textová oblast, platný stav D. Widget Textová oblast, stav Vyžadováno E. Počítadlo napsaných znaků
widget Ověření textové oblasti obsahuje řadu stavů (například platný, neplatný, vyžadovaná hodnota a podobně). Vlastnosti těchto stavů můžete změnit pomocí inspektoru Vlastnosti s ohledem na požadované výsledky ověřování. widget Ověření textové oblasti může ověřovat v různých okamžicích – například, když uživatel klepne mimo widget, když píše nebo když zkouší odeslat formulář.
Počáteční stav
Stav widgetu, když se stránka načte do prohlížeče nebo když uživatel obnoví formulář.
Stav aktivace
Stav widgetu, když uživatel umístí textový kurzor do widgetu.
Platný stav
Stav widgetu, když uživatel zadal informace správně a formulář může odeslat.
Stav Vyžadováno
Stav widgetu, když uživatel nezadal žádný text.
Stav Minimální počet znaků
Stav widgetu, když uživatel zadal do textové oblasti méně znaků, než je vyžadovaný minimální počet.
Stav Maximální počet znaků
Stav widgetu, když uživatel zadal do textové oblasti pole více znaků, než je maximální povolený počet.
Jakmile widget Ověření textové oblasti vstoupí do jednoho z těchto stavů prostřednictvím uživatelské interakce, logika frameworku Spry aplikuje za běhu specifickou třídu CSS na kontejner HTML widgetu. Pokud uživatel zkusí například odeslat formulář, ale do textové oblasti nezadal žádný text, Spry aplikuje na widget třídu, která vyvolá zobrazení chybové zprávy „Je vyžadována hodnota“. Pravidla, která určují styl a zobrazují stavy chybových zpráv, jsou umístěna v souboru CSS (SpryValidationTextArea.css), který doprovází widget.
Standardní HTML pro widget Ověření textové oblasti (obvykle ve formuláři) obsahuje tag kontejneru <span>, který obklopuje tag <textarea> textové oblasti. HTML pro widget Ověření textové oblasti obsahuje v hlavičce dokumentu a za HTML widgetu také tagy skriptu.
Podrobnější vysvětlení činnosti widgetu Ověření textové oblasti, včetně úplné struktury jeho kódu, naleznete na adrese www.adobe.com/go/learn_dw_sprytextarea_cz.
Vložení a úpravy widgetu Ověření textové oblasti
Vložení widgetu Ověření textové oblasti
-
-
Vyplňte dialogové okno Atributy tagu vstupu pro usnadnění přístupu a klikněte na tlačítko OK.
Poznámka:
widget Ověření textové oblasti můžete vložit také pomocí kategorie Spry na panelu Vložit.
Určení, kdy proběhne ověření
Okamžik, ve kterém proběhne ověření, můžete nastavit – když uživatel klikne mimo widget, když zapisuje nebo když zkouší odeslat formulář.
-
V okně dokumentu vyberte widget Ověření textové oblasti.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte volbu Ověřit při, která označuje, kdy chcete, aby ověření proběhlo. Můžete vybrat všechny volby, nebo pouze volbu Odeslání.
Rozostření
Ověření proběhne pokaždé, když uživatel klepne mimo textové pole.
Změna
Ověření proběhne, jakmile uživatel změní text v textovém poli.
Odeslání
Ověření v okamžiku, kdy se uživatel pokusí odeslat formulář. Volba Odeslání je vybrána ve výchozím nastavení a její výběr nelze zrušit.
Stanovení minimálního a maximálního počtu znaků
-
V okně dokumentu vyberte widget Ověření textové oblasti.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) zadejte číslo do pole Min. počet znaků nebo Max. počet znaků. Pokud například zadáte do pole Min. počet znaků číslo 20, widget pouze ověří, zda uživatel zadává do textové oblasti dvacet nebo více znaků.
Přidání počítadla znaků
Můžete přidat počítadlo znaků, díky němuž budou uživatelé vědět, kolik znaků napsali nebo kolik znaků při vkládání textu do textové oblasti zbývá. Když přidáte počítadlo znaků, počítadlo se standardně objeví vně pravého spodního rohu widgetu.
-
V okně dokumentu vyberte widget Ověření textové oblasti.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte volbu Počet znaků nebo Zbývající znaky.Poznámka:
Volba Zbývající znaky je dostupná pouze pokud jste již zadali maximální počet povolených znaků.
Zobrazení stavů widgetu v zobrazení Návrh
-
V okně dokumentu vyberte widget Ověření textové oblasti.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte stav, který chcete vidět v rozbalovací nabídce Náhled stavů. Pokud například chcete vidět widget v jeho platném stavu, vyberte volbu Platný.
Změna vyžadovaného stavu textové oblasti
Všechny widgety Ověření textové oblasti, které vkládáte pomocí aplikace Dreamweaver, při publikaci na webové stránce standardně vyžadují zadání od uživatele. Textové oblasti ale můžete určit k ověření jako volitelné.
-
V okně dokumentu vyberte widget Ověření textové oblasti.
-
V inspektoru Vlastnosti (Okno > Vlastnosti) podle požadavků vyberte volbu Vyžadované nebo její výběr zrušte.
Vytvoření rady pro textovou oblast
Do textové oblasti můžete přidat radu (například „Sem zadejte svůj popis“), aby uživatelé věděli, jaký druh informace by měli do textové oblasti zadat. Textová oblast zobrazí text rady v okamžiku, kdy uživatel načte stránku do prohlížeče.
-
V okně dokumentu vyberte widget Ověření textové oblasti.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) zadejte nápovědu do textového pole Rada.
Blokovat nadbytečné znaky
Ve widgetu Ověření textové oblasti můžete uživatelům zabránit ve vložení více znaků, než je maximální povolený počet. Pokud například vyberete tuto volbu pro widget nastavený tak, aby neakceptoval více než 20 znaků, uživatel nebude moci do textové oblasti napsat více než 20 znaků.
-
V okně dokumentu vyberte widget Ověření textové oblasti.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte volbu Blokovat nadbytečné znaky.
Přizpůsobení widgetu Ověření textové oblasti
I když inspektor Vlastnosti umožňuje jednoduché úpravy widgetu Ověření textové oblasti, nepodporuje úlohy přizpůsobení stylu. Pro widget Ověření textové oblasti můžete upravit CSS a vytvořit tak widget, který je stylově upraven podle vašich potřeb. Seznam pokročilejších úloh přizpůsobení stylu naleznete na adrese www.adobe.com/go/learn_dw_sprytextarea_custom_cz.
Všechna pravidla CSS v níže uvedených tématech se vztahují ke standardním pravidlům umístěným v souboru SpryValidationTextArea.css. Aplikace Dreamweaver uloží soubor SpryValidationTextArea.css do složky zdrojů Spry webového místa při každém vytvoření widgetu Ověření textové oblasti Spry. Přečtení tohoto souboru je užitečné, protože soubor obsahuje vysvětlující informace o nejrůznějších stylech, které se k widgetu vztahují.
Poznámka:
I když můžete pravidla pro widget Ověření textové oblasti snadno upravit přímo v přiloženém souboru CSS, k úpravě CSS widgetu můžete použít také panel Styly CSS. Panel Styly CSS je užitečný k vyhledání tříd CSS přiřazených k různým částem widgetu, zejména pokud používáte režim panelu Současný.
Nastavení stylu textu chybových zpráv widgetu Ověření textové oblasti
Standardně se textové zprávy pro widget Ověření textové oblasti zobrazují v červené barvě s okrajem o šířce 1 obrazový bod okolo textu.
-
Chcete-li změnit styl textu chybových zpráv widgetu Ověření textové oblasti, použijte k vyhledání příslušného pravidla CSS následující tabulku a pak změňte výchozí vlastnosti nebo přidejte svoje vlastnosti a hodnoty stylu textu:
Text, který chcete změnit
Příslušné pravidlo CSS
Příslušné vlastnosti, které se mají změnit
Text chybové zprávy
.textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
Změna barev pozadí widgetu Ověření textové oblasti
-
Chcete-li změnit barvy pozadí widgetu Ověření textové oblasti v různých stavech, použijte k vyhledání příslušného pravidla CSS následující tabulku a pak změňte standardní hodnoty barvy pozadí:
Barva pozadí, kterou chcete změnit
Příslušné pravidlo CSS
Příslušná vlastnost, kterou chcete změnit
Barva pozadí widgetu v platném stavu
.textareaValidState textarea, textarea.textareaValidState background-color: #B8F5B1;
Barva pozadí widgetu v neplatném stavu
textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea background-color: #FF9F9F;
Barva pozadí widgetu při aktivaci
.textareaFocusState textarea, textarea.textareaFocusState background-color: #FFFFCC;
Další podobné nápovědy
Přihlaste se ke svému účtu.