Skip to main content

Textarea

scoped

Textarea rozširuje možnosti štandardného HTML textarea elementu. Pridáva štýly pre dosiahnutie vizuálne konzistentného používateľského rozhrania a ponúka funkcie ako napríklad auto-height - prispôsobenie výšky elementu vloženému textu, alebo tiež počítadlo vložených znakov.

Základné použitie

Standard

Pridaním atribútu standard sa zobrazí textarea v štýle štandardného HTML textarea elementu.

Counter

Pridaním atribútu counter sa pod textareou zobrazí počítadlo zobrazujúce počet vložených znakov a ich maximálny povolený počet. Je potrebné použitie v kombinácii s vlastnosťou max-length. V opačnom prípade bude maximálny povolený počet nastavený na 1000.

Resize (none)

Vlastnosť resize určuje správanie zmeny veľkosti elementu. Ak je nastavená na hodnotu none, veľkosť poľa zostane fixná.

Resize (auto)

Ak je vlastnosť resize nastavená na hodnotu auto, automaticky sa prispôsobí veľkosť elementu vloženému obsahu.

Disabled

Pri vloženom atribúte disabled do elementu textarea nebude možné písať.

Atribúty a Vlastnosti

value

DescriptionHodnota textarea.
Attributevalue
Typestring
Defaultundefined

invalid

DescriptionOznačuje, či je vstup neplatný.
Attributeinvalid
Typeboolean
Defaultundefined

placeholder

DescriptionZástupný text v textarea.
Attributeplaceholder
Typestring
Defaultundefined

rows

DescriptionPočet riadkov textarea.
Attributerows
Typenumber
Defaultundefined

spellcheck

DescriptionAk true, v textarea bude zapnutá kontrola pravopisu.
Attributespellcheck
Typeboolean
Defaultundefined

resize

DescriptionRežim zmeny veľkosti (auto alebo none).
Attributeresize
Typestring
Defaultundefined

counter

DescriptionAk true, zobrazí sa počítadlo znakov.
Attributecounter
Typeboolean
Defaultundefined

maxLength

DescriptionMaximálny počet znakov.
AttributemaxLength
Typenumber
Defaultundefined

Eventy

NameDescription
undefinedUdalosť zmeny (klasický change).
undefinedUdalosť pri zadávaní znakov (input).
undefinedUdalosť neplatného vstupu.

Metódy

setTextareaHeight

DescriptionNastaví výšku textarea pri automatickej zmene veľkosti.
Signature() => void

counterFn

DescriptionAktualizuje počítadlo znakov.
Signature(e: Event) => void

validateInput

DescriptionOverí validitu vstupu a nastaví chyby.
Signature() => void

propagateValidation

DescriptionPropaguje stav validácie a vyvolá udalosť invalid.
Signature() => void

formAssociatedCallback

DescriptionCallback pri pripojení k formuláru – napojí odoslanie a validáciu.
Signature(form: HTMLFormElement) => void

formResetCallback

DescriptionCallback pri resetovaní formuláru – obnoví predvolenú hodnotu.
Signature() => void

formStateRestoreCallback

DescriptionCallback pri obnove stavu – obnoví uloženú hodnotu a validitu.
Signature(state: any) => void

formStateSaveCallback

DescriptionCallback pri ukladaní stavu – vráti aktuálnu hodnotu.
Signature() => any

CSS Shadow Parts

NameDescription
nativeObal natívneho textarea.
wrapperObal vstupného poľa.
inputVlastný textarea element.

CSS Custom Vlastnosti

NameDescription
--wje-textarea-font-familyRodina písiem používaná v textarea.
--wje-textarea-background-colorPozadie textarea.
--wje-textarea-colorFarba textu v textarea.
--wje-textarea-border-widthŠírka rámika textarea.
--wje-textarea-border-styleŠtýl rámika textarea.
--wje-textarea-border-colorFarba rámika textarea.
--wje-textarea-border-color-focusFarba rámika pri focus.
--wje-textarea-border-radiusPolomer zaoblenia rohov textarea.
--wje-textarea-color-invalidFarba textu pri neplatnom vstupe.
--wje-textarea-margin-bottomOdsadenie spodnej časti textarea.
--wje-textarea-paddingVnútorný odsadzovací priestor textarea.
--wje-textarea-line-heightVýška riadku textu.

Sloty

NameDescription
``Predvolený slot pre obsah (text).
startSlot pre prvý slotted element (napr. ikona vľavo).
endSlot pre druhý slotted element (napr. ikona vpravo).