TextFieldTextové pole

Textové pole slouží k zadávání textu na stránce, obvykle ve formulářích a dialozích.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/text-field.js';

Importujte TypeScript typy komponenty podle potřeby:

import type { TextField } from 'mdui/components/text-field.js';

Příklad použití:

<mdui-text-field label="Textové pole"></mdui-text-field>

Pomocí atributu helper nastavte pomocný text ve spodní části textového pole. Lze také použít slot helper k nastavení pomocného textu. Přidejte atribut helper-on-focus, aby se pomocný text zobrazoval pouze tehdy, když je vstupní pole aktivní.

Podpůrný text

<mdui-text-field label="Textové pole" helper="Podpůrný text"></mdui-text-field>

<mdui-text-field label="Textové pole">
  <span slot="helper" style="color: blue">Podpůrný text</span>
</mdui-text-field>

<mdui-text-field label="Textové pole" helper="Podpůrný text" helper-on-focus></mdui-text-field>

Zdrojový kód

Vymazatelné

Po přidání atributu clearable se na pravé straně textového pole, když má hodnotu, zobrazí tlačítko pro vymazání.

<mdui-text-field clearable label="Textové pole" value="Vstupní text"></mdui-text-field>

Zdrojový kód

Zarovnání textu vpravo

Přidejte atribut end-aligned pro zarovnání textu vpravo.

<mdui-text-field end-aligned label="Textové pole" value="Vstupní text"></mdui-text-field>

Zdrojový kód

Předponový/příponový text a ikona

Nastavením atributů icon a end-icon můžete přidat ikony Material Icons na levou a pravou stranu textového pole. Lze také přidat prvky na levou a pravou stranu textového pole pomocí slotů icon a end-icon.

<mdui-text-field icon="search" end-icon="mic" label="Textové pole"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Textové pole">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

Zdrojový kód

Nastavením atributů prefix a suffix můžete přidat text na levou a pravou stranu textového pole. Lze také přidat textové prvky na levou a pravou stranu textového pole pomocí slotů prefix a suffix. Tyto texty se zobrazí pouze tehdy, když je textové pole zaměřeno nebo má hodnotu.

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Textové pole"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Textové pole">
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-text-field>

Zdrojový kód

Režim pouze pro čtení

Přidáním atributu readonly nastavíte textové pole do režimu jen pro čtení.

<mdui-text-field readonly label="Textové pole" value="Vstupní text"></mdui-text-field>

Zdrojový kód

Zakázaný stav

Přidáním atributu disabled zakážete textové pole.

<mdui-text-field disabled label="Textové pole" value="Vstupní text"></mdui-text-field>

Zdrojový kód

Víceřádkové textové pole

Pomocí atributu rows můžete nastavit počet řádků víceřádkového textového pole.

<mdui-text-field rows="3" label="Textové pole"></mdui-text-field>

Zdrojový kód

Lze také přidat atribut autosize, aby se výška textového pole automaticky přizpůsobovala délce vstupního obsahu. Pomocí atributů min-rows a max-rows můžete určit minimální a maximální počet řádků při automatickém přizpůsobování výšky.

<mdui-text-field autosize label="Textové pole"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Textové pole"></mdui-text-field>

Zdrojový kód

Počítadlo znaků

Když je maximální počet znaků nastaven atributem maxlength, můžete přidat atribut counter pro zobrazení počítadla znaků pod textovým polem.

<mdui-text-field maxlength="20" counter label="Textové pole"></mdui-text-field>

Zdrojový kód

Heslové pole

Když je type="password", přidáním atributu toggle-password přidáte na pravou stranu textového pole tlačítko pro přepínání viditelnosti hesla.

<mdui-text-field type="password" toggle-password label="Textové pole"></mdui-text-field>

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Styl textového pole. Výchozí je `filled`. Možné hodnoty: `filled`: Textové pole s barvou pozadí, výraznější vizuální efekt. `outlined`: Textové pole s okrajem, méně výrazný vizuální efekt.
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
Typ vstupu textového pole. Výchozí je `text`. Možné hodnoty: `text`: Výchozí hodnota. Textové pole. `number`: Lze zadávat pouze čísla. Na zařízeních s virtuální klávesnicí se zobrazí numerická klávesnice. `password`: Pro zadávání hesel, hodnota je maskována. `url`: Pro zadávání URL, kontroluje se formát URL. Na zařízeních s podporou virtuální klávesnice má odpovídající klávesnici. `email`: Pro zadávání e-mailových adres, kontroluje se formát e-mailu. Na zařízeních s podporou virtuální klávesnice má odpovídající klávesnici. `search`: Pro vyhledávací pole. Na zařízeních s virtuální klávesnicí se ikona Enter změní na ikonu vyhledávání. `tel`: Pro zadávání telefonních čísel. Na zařízeních s virtuální klávesnicí se zobrazí telefonní numerická klávesnice. `hidden`: Skryje ovládací prvek, ale jeho hodnota se stále odešle na server. `date`: Ovládací prvek pro zadání data (rok, měsíc, den, bez času). V podporovaných prohlížečích po aktivaci otevře výběr data nebo numerický rolovací seznam. `datetime-local`: Ovládací prvek pro zadání data a času, bez časového pásma. V podporovaných prohlížečích po aktivaci otevře výběr data nebo numerický rolovací seznam. `month`: Ovládací prvek pro zadání roku a měsíce, bez časového pásma. `time`: Ovládací prvek pro zadání času, bez časového pásma. `week`: Ovládací prvek pro zadání data tvořeného rokem a číslem týdne, bez časového pásma.
`name`	`name`	`string`	`''`
Název textového pole, který se odešle spolu s daty formuláře.
`value`	`value`	`string`	`''`
Hodnota textového pole, která se odešle spolu s daty formuláře.
	`defaultValue`	`string`	`''`
Výchozí hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
`label`	`label`	`string`	-
Text popisku.
`placeholder`	`placeholder`	`string`	-
Zástupný text.
`helper`	`helper`	`string`	-
Pomocný text pod textovým polem. Lze také nastavit pomocí `slot="helper"`.
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
Určuje, zda se má pomocný text dole zobrazovat pouze při získání fokusu.
`clearable`	`clearable`	`boolean`	`false`
Určuje, zda lze obsah textového pole vyprázdnit.
`clear-icon`	`clearIcon`	`string`	-
Název ikony Material Icons pro tlačítko vymazání zobrazené na pravé straně, pokud je textové pole vyprázdnitelné. Lze také nastavit pomocí `slot="clear-icon"`.
`end-aligned`	`endAligned`	`boolean`	`false`
Určuje, zda má být text zarovnán doprava.
`prefix`	`prefix`	`string`	-
Text předpony textového pole. Zobrazí se pouze v režimu fokusu nebo pokud má textové pole hodnotu. Lze také nastavit pomocí `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Text přípony textového pole. Zobrazí se pouze v režimu fokusu nebo pokud má textové pole hodnotu. Lze také nastavit pomocí `slot="suffix"`.
`icon`	`icon`	`string`	-
Název ikony z knihovny Material Icons pro předponovou ikonu textového pole. Lze také nastavit pomocí `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Název ikony z knihovny Material Icons pro příponovou ikonu textového pole. Lze také nastavit pomocí `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Název ikony z knihovny Material Icons zobrazené na pravé straně textového pole, pokud selže validace pole formuláře. Lze také nastavit pomocí `slot="error-icon"`.
`form`	`form`	`string`	-
Přidružený formulář `<form>`. Hodnotou by mělo být `id` prvku `<form>` na stejné stránce. Pokud není atribut zadán, musí být tento prvek potomkem `<form>`. Díky tomuto atributu jej však lze umístit kamkoli na stránku, nejen jako potomka `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Určuje, zda je prvek v režimu pouze pro čtení.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je vstupní pole zakázané.
`required`	`required`	`boolean`	`false`
Určuje, zda musí být při odesílání formuláře toto pole vyplněno.
`rows`	`rows`	`number`	-
Pevný počet zobrazených řádků textového pole.
`autosize`	`autosize`	`boolean`	`false`
Určuje, zda se má výška textového pole automaticky přizpůsobovat obsahu.
`min-rows`	`minRows`	`number`	-
Minimální počet řádků textového pole, pokud je `autosize` nastaven na `true`.
`max-rows`	`maxRows`	`number`	-
Maximální počet řádků textového pole, pokud je `autosize` nastaven na `true`.
`minlength`	`minlength`	`number`	-
Minimální počet znaků, které lze zadat.
`maxlength`	`maxlength`	`number`	-
Maximální počet znaků, které lze zadat.
`counter`	`counter`	`boolean`	`false`
Určuje, zda se má zobrazovat počítadlo znaků. Platí pouze pokud je zadán `maxlength`.
`min`	`min`	`number`	-
Pokud je `type` nastaven na `number`, minimální hodnota, kterou lze zadat.
`max`	`max`	`number`	-
Pokud je `type` nastaven na `number`, maximální hodnota, kterou lze zadat.
`step`	`step`	`number`	-
Pokud je `type` nastaven na `number`, krok pro zvyšování a snižování hodnoty.
`pattern`	`pattern`	`string`	-
Regulární výraz pro validaci formuláře.
`toggle-password`	`togglePassword`	`boolean`	`false`
Pokud je `type` nastaven na `password`, tento atribut přidá tlačítko pro přepínání zobrazení hesla.
`show-password-icon`	`showPasswordIcon`	`string`	-
Ikona Material Icons pro tlačítko přepínání hesla, která se zobrazí, když je heslo v prostém textu. Lze také nastavit pomocí `slot="show-password-icon"`.
`hide-password-icon`	`hidePasswordIcon`	`string`	-
Ikona Material Icons pro tlačítko přepínání hesla, která se zobrazí, když je heslo skryté. Lze také nastavit pomocí `slot="hide-password-icon"`.
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
Nestandardní atribut pro iOS, který řídí automatické psaní velkých písmen. Platný na iOS verze 5 a novější. Možné hodnoty: `none`: Zakáže automatické psaní velkých písmen. `sentences`: První písmeno vět bude velké. `words`: První písmeno slov bude velké. `characters`: Všechna písmena budou velká.
`autocorrect`	`autocorrect`	`string`	-
Atribut `autocorrect` prvku `input`.
`autocomplete`	`autocomplete`	`string`	-
Atribut `autocomplete` prvku `input`.
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
Atribut `enterkeyhint` prvku `input`, který slouží k přizpůsobení zobrazeného textu nebo ikony na klávese Enter na virtuální klávesnici. Konkrétní zobrazení závisí na použitém zařízení a jazyce. Možné hodnoty: `enter`: Vloží nový řádek. `done`: Dokončí zadávání, zavře virtuální klávesnici. `go`: Přejde na cíl zadaného textu. `next`: Přesune se na další vstupní pole. `previous`: Přesune se na předchozí vstupní pole. `search`: Přejde na výsledky vyhledávání. `send`: Odešle textovou zprávu.
`spellcheck`	`spellcheck`	`boolean`	`false`
Určuje, zda je povolena kontrola pravopisu.
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
Atribut `inputmode` prvku `input`, který slouží k přizpůsobení typu virtuální klávesnice. Možné hodnoty: `none`: Žádná virtuální klávesnice. Užitečné, když je třeba implementovat vlastní ovládací prvek pro zadávání. `text`: Standardní klávesnice pro zadávání textu. `decimal`: Klávesnice pro zadávání desetinných čísel, kromě číslic může obsahovat desetinnou tečku `.` nebo čárku pro oddělení tisíců `,`. `numeric`: Zobrazí numerickou klávesnici 0-9. `tel`: Telefonní numerická klávesnice, obsahuje číslice 0-9, hvězdičku `*` nebo hash `#`. `search`: Virtuální klávesnice optimalizovaná pro zadávání vyhledávání, tlačítko pro odeslání obvykle zobrazí `search` nebo „Hledat“. `email`: Virtuální klávesnice optimalizovaná pro zadávání e-mailových adres, obvykle obsahuje klávesy jako `@ .`. `url`: Virtuální klávesnice optimalizovaná pro zadávání URL, obvykle obsahuje klávesy jako `. / #`.
	`validity`	`ValidityState`	-
Objekt s informacemi o stavu validace formuláře; podrobnosti viz `ValidityState`.
	`validationMessage`	`string`	-
Pokud pole formuláře neprojde validací, tato vlastnost obsahuje chybovou zprávu. Při úspěšné validaci je výsledkem prázdný řetězec.
	`valueAsNumber`	`number`	-
Získá aktuální hodnotu převedenou na typ `number`; nebo nastaví hodnotu typu `number`. Pokud hodnotu nelze převést na typ `number`, vrátí `NaN`.
`autofocus`	`autofocus`	`boolean`	`false`
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
`tabindex`	`tabIndex`	`number`	-
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.

Metody

Název	Parametry	Vrací
`select`		`void`
Vybere text v textovém poli.
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
Vybere určitý rozsah obsahu v textovém poli.
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
Nahradí text v určitém rozsahu v textovém poli novým textem.
`checkValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`.
`reportValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`. Při neúspěšné validaci se zobrazí chybová zpráva.
`setCustomValidity`	`message: string`	`void`
Nastaví vlastní chybový text. Dokud tento text není prázdný, znamená to, že pole neprošlo validací.
`click`		`void`
Simuluje kliknutí myší na prvek.
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek. Lze předat objekt jako parametr s vlastnostmi: `preventScroll`: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na `true`.
`blur`		`void`
Odebere fokus z aktuálního prvku.

Události

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.
`change`
Spustí se, když dojde ke změně hodnoty v textovém poli a prvek ztratí fokus.
`input`
Spustí se při změně hodnoty v textovém poli.
`invalid`
Spustí se, pokud pole formuláře neprojde validací.
`clear`
Spustí se při kliknutí na tlačítko pro vyprázdnění generované atributem `clearable`. Vyprázdnění textového pole lze zabránit voláním `event.preventDefault()`.

Slots

Název
`icon`
Levá ikona.
`end-icon`
Pravá ikona.
`error-icon`
Pravá ikona pro stav selhání validace.
`prefix`
Levý text.
`suffix`
Pravý text.
`clear-button`
Tlačítko pro vyprázdnění.
`clear-icon`
Ikona v tlačítku pro vyprázdnění.
`toggle-password-button`
Tlačítko pro přepínání stavu zobrazení hesla.
`show-password-icon`
Ikona v tlačítku pro přepínání stavu zobrazení hesla, když je heslo zobrazeno.
`hide-password-icon`
Ikona v tlačítku pro přepínání stavu zobrazení hesla, když je heslo skryto.
`helper`
Pomocný text dole.

CSS Parts

Název
`container`
Kontejner textového pole.
`icon`
Levá ikona.
`end-icon`
Pravá ikona.
`error-icon`
Pravá ikona pro stav selhání validace.
`prefix`
Levý text.
`suffix`
Pravý text.
`label`
Text popisku nahoře.
`input`
Interní prvek `<input>` nebo `<textarea>`.
`clear-button`
Tlačítko pro vyprázdnění.
`clear-icon`
Ikona v tlačítku pro vyprázdnění.
`toggle-password-button`
Tlačítko pro přepínání stavu zobrazení hesla.
`show-password-icon`
Ikona v tlačítku pro přepínání stavu zobrazení hesla, když je heslo zobrazeno.
`hide-password-icon`
Ikona v tlačítku pro přepínání stavu zobrazení hesla, když je heslo skryto.
`supporting`
Kontejner pro pomocné informace dole, zahrnuje helper, error a counter.
`helper`
Pomocný text dole.
`error`
Popis chyby dole.
`counter`
Počítadlo znaků vpravo dole.

Předchozí kapitola

Tabs Záložky

Další kapitola

Tooltip Tooltip

TextFieldTextové pole

Způsob použití

Příklady

Tvar

Podpůrný text

Vymazatelné

Zarovnání textu vpravo

Předponový/příponový text a ikona

Režim pouze pro čtení

Zakázaný stav

Víceřádkové textové pole

Počítadlo znaků

Heslové pole

API

Vlastnosti

Metody

Události

Slots

CSS Parts