TextFieldSzövegmező

A szövegmező lehetővé teszi, hogy a felhasználók szöveget írjanak be, jellemzően űrlapokban és párbeszédablakokban.

Használat

A komponens importálása:

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

A komponens TypeScript-típusának importálása:

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

Példa:

<mdui-text-field label="Szövegmező"></mdui-text-field>

A helper attribútummal adhat meg segítőszöveget a szövegmező alatt. A helper sloton keresztül is megadhatja ezt a szöveget. A helper-on-focus attribútummal a segítőszöveg csak akkor jelenik meg, ha a mező fókuszban van.

Segítő szöveg

<mdui-text-field label="Szövegmező" helper="Segítő szöveg"></mdui-text-field>

<mdui-text-field label="Szövegmező">
  <span slot="helper" style="color: blue">Segítő szöveg</span>
</mdui-text-field>

<mdui-text-field label="Szövegmező" helper="Segítő szöveg" helper-on-focus></mdui-text-field>

Forrás

Törölhető

A clearable attribútummal a szövegmező jobb oldalán törlés gomb jelenik meg, ha a mezőnek van értéke.

<mdui-text-field clearable label="Szövegmező" value="Beviteli szöveg"></mdui-text-field>

Forrás

Szöveg jobbra igazítása

Az end-aligned attribútummal jobbra igazíthatja a szöveget.

<mdui-text-field end-aligned label="Szövegmező" value="Beviteli szöveg"></mdui-text-field>

Forrás

Előtag és utótag szövegek és ikonok

Az icon és end-icon attribútumokkal Material Icons ikonokat adhat a szövegmező elejére és végére. Az icon és end-icon slotokban is megadhat elemeket a szövegmező elejére és végére.

<mdui-text-field icon="search" end-icon="mic" label="Szövegmező"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Szövegmező">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

Forrás

A prefix és suffix attribútumokkal kiegészítő szövegeket adhat a szövegmező elejére és végére. A prefix és suffix slotokban is megadhat szöveges elemeket a szövegmező elejére és végére. Ezek a szövegek csak akkor jelennek meg, ha a szövegmező fókuszban van vagy van értéke.

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Szövegmező"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Szövegmező">
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-text-field>

Forrás

Csak olvasható mód

A readonly attribútummal a szövegmezőt csak olvasható módba állíthatja.

<mdui-text-field readonly label="Szövegmező" value="Beviteli szöveg"></mdui-text-field>

Forrás

Letiltott állapot

A disabled attribútummal letilthatja a szövegmezőt.

<mdui-text-field disabled label="Szövegmező" value="Beviteli szöveg"></mdui-text-field>

Forrás

Többsoros szövegmező

A rows attribútummal beállíthatja a többsoros szövegmező sorainak számát.

<mdui-text-field rows="3" label="Szövegmező"></mdui-text-field>

Forrás

Az autosize attribútummal a szövegmező automatikusan igazodjon a beírt tartalom hosszához. A min-rows és max-rows attribútumokkal megadhatja az automatikus méretezés minimális és maximális sorainak számát.

<mdui-text-field autosize label="Szövegmező"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Szövegmező"></mdui-text-field>

Forrás

Karakterszámláló

Ha a maxlength attribútummal beállította a maximális karakterszámot, adja hozzá a counter attribútumot a karakterszámláló megjelenítéséhez a szövegmező alatt.

<mdui-text-field maxlength="20" counter label="Szövegmező"></mdui-text-field>

Forrás

Jelszómező

Ha a type="password" be van állítva, adja hozzá a toggle-password attribútumot a jelszó láthatóságát váltó gomb megjelenítéséhez a szövegmező jobb oldalán.

<mdui-text-field type="password" toggle-password label="Szövegmező"></mdui-text-field>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
A szövegmező variánsa. Alapértelmezés szerint `filled`. Lehetséges értékek: `filled`: Háttérszínnel rendelkező szövegmező, erősebb vizuális hatás `outlined`: Keretes szövegmező, gyengébb vizuális hatás
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
A szövegmező beviteli típusa. Alapértelmezés szerint `text`. Lehetséges értékek: `text`: Alapértelmezett érték. Szöveges mező `number`: Csak számok bevitelére alkalmas. A dinamikus billentyűzettel rendelkező eszközökön számbillentyűzet jelenik meg `password`: Jelszó bevitelére szolgál, az érték el van fedve `url`: URL bevitelére szolgál, ellenőrzi az URL formátumát. A dinamikus billentyűzetet támogató eszközökön a megfelelő billentyűzet jelenik meg `email`: E-mail cím bevitelére szolgál, ellenőrzi az e-mail formátumot. A dinamikus billentyűzetet támogató eszközökön a megfelelő billentyűzet jelenik meg `search`: Keresőmezőhöz. A dinamikus billentyűzettel rendelkező eszközökön az Enter ikon keresés ikonra változik `tel`: Telefonszám bevitelére szolgál. A dinamikus billentyűzettel rendelkező eszközökön telefonszám billentyűzet jelenik meg `hidden`: Elrejti a vezérlőt, de az értéke továbbra is elküldésre kerül a szerverre `date`: Dátum bevitelére szolgáló vezérlő (év, hónap, nap, idő nélkül). Támogatott böngészőkben aktiválva megnyitja a dátumválasztót vagy az év/hónap/nap görgetőt `datetime-local`: Dátum és idő bevitelére szolgáló vezérlő, időzóna nélkül. Támogatott böngészőkben aktiválva megnyitja a dátumválasztót vagy az év/hónap/nap görgetőt `month`: Év és hónap bevitelére szolgáló vezérlő, időzóna nélkül `time`: Idő bevitelére szolgáló vezérlő, időzóna nélkül `week`: Év és hét számából álló dátum bevitelére szolgáló vezérlő, időzóna nélkül
`name`	`name`	`string`	`''`
A szövegmező neve, amely az űrlapadatokkal együtt kerül elküldésre.
`value`	`value`	`string`	`''`
A szövegmező értéke, amely az űrlapadatokkal együtt kerül elküldésre.
	`defaultValue`	`string`	`''`
Alapértelmezett érték. Az űrlap visszaállításakor erre az alapértékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
`label`	`label`	`string`	-
Címke szöveg.
`placeholder`	`placeholder`	`string`	-
Helyőrző szöveg.
`helper`	`helper`	`string`	-
A szövegmező alján található súgó szöveg. Beállítható a `slot="helper"` segítségével is.
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
Csak fókusz megszerzésekor jelenjen-e meg az alsó súgó szöveg.
`clearable`	`clearable`	`boolean`	`false`
A szövegmező tartalma törölhető-e.
`clear-icon`	`clearIcon`	`string`	-
Ha a szövegmező törölhető, a jobb oldalon megjelenő törlés gomb Material Icons ikonjának neve. Beállítható a `slot="clear-icon"` segítségével is.
`end-aligned`	`endAligned`	`boolean`	`false`
A szöveg jobbra legyen-e igazítva.
`prefix`	`prefix`	`string`	-
A szövegmező előtag szövege. Csak akkor jelenik meg, ha a szövegmező fókuszban van, vagy van értéke. Beállítható a `slot="prefix"` segítségével is.
`suffix`	`suffix`	`string`	-
A szövegmező utótag szövege. Csak akkor jelenik meg, ha a szövegmező fókuszban van, vagy van értéke. Beállítható a `slot="suffix"` segítségével is.
`icon`	`icon`	`string`	-
A szövegmező előtag ikonjának Material Icons ikon neve. Beállítható a `slot="icon"` segítségével is.
`end-icon`	`endIcon`	`string`	-
A szövegmező utótag ikonjának Material Icons ikon neve. Beállítható a `slot="end-icon"` segítségével is.
`error-icon`	`errorIcon`	`string`	-
Az űrlapmező ellenőrzésének sikertelenségekor a szövegmező jobb oldalán megjelenő Material Icons ikon neve. Beállítható a `slot="error-icon"` segítségével is.
`form`	`form`	`string`	-
A kapcsolódó `<form>` elem. Ennek az attribútumnak az értéke egy `<form>` elem `id`-ja kell legyen ugyanazon az oldalon. Ha ez az attribútum nincs megadva, az elemnek a `<form>` elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a `<form>` elem gyermekeként.
`readonly`	`readonly`	`boolean`	`false`
Csak olvasható módban van-e.
`disabled`	`disabled`	`boolean`	`false`
A beviteli mező letiltása.
`required`	`required`	`boolean`	`false`
Az űrlap elküldésekor kötelező-e kitölteni ezt a mezőt.
`rows`	`rows`	`number`	-
A szövegmező rögzített megjelenítési sorainak száma.
`autosize`	`autosize`	`boolean`	`false`
A szövegmező magassága automatikusan igazodik-e a beviteli tartalomhoz.
`min-rows`	`minRows`	`number`	-
A szövegmező minimális sorainak száma, ha az `autosize` `true`.
`max-rows`	`maxRows`	`number`	-
A szövegmező maximális sorainak száma, ha az `autosize` `true`.
`minlength`	`minlength`	`number`	-
A megengedett minimális karakterszám.
`maxlength`	`maxlength`	`number`	-
A megengedett maximális karakterszám.
`counter`	`counter`	`boolean`	`false`
A karakterszámláló megjelenítése, csak akkor érvényes, ha a `maxlength` meg van adva.
`min`	`min`	`number`	-
Ha a `type` `number`, a megengedett minimális számérték.
`max`	`max`	`number`	-
Ha a `type` `number`, a megengedett maximális számérték.
`step`	`step`	`number`	-
Ha a `type` `number`, a szám növelésének/csökkentésének lépésköze.
`pattern`	`pattern`	`string`	-
Az űrlap-ellenőrzéshez használt reguláris kifejezés.
`toggle-password`	`togglePassword`	`boolean`	`false`
Ha a `type` `password`, ennek az attribútumnak a beállításával egy váltógomb kerül hozzáadásra, amely a szöveg és a jelszó között vált.
`show-password-icon`	`showPasswordIcon`	`string`	-
A jelszó váltógomb Material Icons ikonja, amely akkor jelenik meg, ha a jelszó szövegként látható. Beállítható a `slot="show-password-icon"` segítségével is.
`hide-password-icon`	`hidePasswordIcon`	`string`	-
A jelszó váltógomb Material Icons ikonja, amely akkor jelenik meg, ha a jelszó el van fedve. Beállítható a `slot="hide-password-icon"` segítségével is.
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
Az iOS nem szabványos attribútuma, amely a szöveg első betűjének automatikus nagybetűs írását szabályozza. Az iOS5 és későbbi verziókon érvényes. Lehetséges értékek: `none`: Az első betű nagybetűs írásának letiltása `sentences`: A mondatok első betűje nagybetűs `words`: A szavak első betűje nagybetűs `characters`: Minden betű nagybetűs
`autocorrect`	`autocorrect`	`string`	-
Az `input` elem `autocorrect` attribútuma.
`autocomplete`	`autocomplete`	`string`	-
Az `input` elem `autocomplete` attribútuma.
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
Az `input` elem `enterkeyhint` attribútuma, amely az Enter billentyű megjelenített szövegének vagy ikonjának testreszabására szolgál a virtuális billentyűzeten. A tényleges megjelenítés a felhasználó eszközétől és nyelvétől függ. Lehetséges értékek: `enter`: Új sor beszúrása `done`: Bevitel befejezése, virtuális billentyűzet bezárása `go`: Navigálás a beírt szöveg céljához `next`: Ugrás a következő beviteli mezőre `previous`: Ugrás az előző beviteli mezőre `search`: Navigálás a keresési eredményekhez `send`: Szöveges üzenet küldése
`spellcheck`	`spellcheck`	`boolean`	`false`
A helyesírás-ellenőrzés engedélyezve van-e.
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
Az `input` elem `inputmode` attribútuma, amely a virtuális billentyűzet típusát testreszabására szolgál. Lehetséges értékek: `none`: Nincs virtuális billentyűzet. Hasznos, ha saját billentyűzetbeviteli vezérlőt kell megvalósítani `text`: Normál szövegbeviteli billentyűzet `decimal`: Tizedes szám beviteli billentyűzet, a számokon kívül lehet tizedespont `.` vagy ezreselválasztó vessző `,` `numeric`: 0-9 számok megjelenítése `tel`: Telefonos számbillentyűzet, 0-9 számokat, csillag `*` vagy kettőskereszt `#` billentyűket tartalmaz `search`: Keresőbevitelre optimalizált virtuális billentyűzet, a küldés gomb általában `search` vagy "Keresés" feliratú `email`: E-mail cím bevitelére optimalizált virtuális billentyűzet, általában tartalmaz `@ .` stb. billentyűket `url`: URL bevitelére optimalizált virtuális billentyűzet, általában tartalmaz `. / #` stb. billentyűket
	`validity`	`ValidityState`	-
Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: `ValidityState`
	`validationMessage`	`string`	-
Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.
	`valueAsNumber`	`number`	-
Lekéri az aktuális értéket, és `number` típusra alakítja át; vagy beállít egy `number` típusú értéket. Ha az érték nem alakítható át `number` típusra, `NaN` értéket ad vissza.
`autofocus`	`autofocus`	`boolean`	`false`
Automatikusan fókuszt kapjon-e betöltődés után.
`tabindex`	`tabIndex`	`number`	-
Az elem sorszáma a Tab billentyűvel történő navigálás során.

Metódusok

Név	Paraméterek	Visszatérési érték
`select`		`void`
Kijelöli a szövegmezőben lévő szöveget.
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
Kijelöli a szövegmezőben lévő szöveg egy adott tartományát.
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
A szövegmezőben lévő szöveg adott tartományát lecseréli új szövegre.
`checkValidity`		`boolean`
Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, `false` értéket ad vissza és kiváltja az `invalid` eseményt; ha igen, `true` értéket ad vissza.
`reportValidity`		`boolean`
Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, `false` értéket ad vissza, kiváltja az `invalid` eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, `true` értéket ad vissza. Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
`setCustomValidity`	`message: string`	`void`
Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.
`click`		`void`
Egérkattintás szimulálása az elemen.
`focus`	`options: FocusOptions` (Opcionális)	`void`
Fókusz állítása az aktuális elemre. Egy objektum is átadható paraméterként, a következő tulajdonságokkal: `preventScroll`: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot `true`-ra állítja, a görgetés elmarad.
`blur`		`void`
Fókusz eltávolítása az aktuális elemről.

Események

Név
`focus`
Fókusz elnyerésekor aktiválódik.
`blur`
Fókusz elvesztésekor aktiválódik.
`change`
A szövegmező értékének megváltozásakor és a fókusz elvesztésekor aktiválódik.
`input`
A szövegmező értékének megváltozásakor aktiválódik.
`invalid`
Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
`clear`
A `clearable` attribútum által generált törlés gombra kattintáskor aktiválódik. Az `event.preventDefault()` meghívásával megakadályozható a szövegmező tartalmának törlése.

Slots

Név
`icon`
Bal oldali ikon.
`end-icon`
Jobb oldali ikon.
`error-icon`
Ellenőrzési hiba állapot jobb oldali ikonja.
`prefix`
Bal oldali szöveg.
`suffix`
Jobb oldali szöveg.
`clear-button`
Törlés gomb.
`clear-icon`
A törlés gombban lévő ikon.
`toggle-password-button`
Jelszó megjelenítési állapot váltógomb.
`show-password-icon`
A jelszó megjelenítése állapotban a jelszó megjelenítési állapot váltógombban lévő ikon.
`hide-password-icon`
A jelszó elrejtése állapotban a jelszó megjelenítési állapot váltógombban lévő ikon.
`helper`
Az alsó súgó szöveg.

CSS Parts

Név
`container`
A szövegmező konténere.
`icon`
Bal oldali ikon.
`end-icon`
Jobb oldali ikon.
`error-icon`
Ellenőrzési hiba állapot jobb oldali ikonja.
`prefix`
Bal oldali szöveg.
`suffix`
Jobb oldali szöveg.
`label`
A felső címke szövege.
`input`
A belső `<input>` vagy `<textarea>` elem.
`clear-button`
Törlés gomb.
`clear-icon`
A törlés gombban lévő ikon.
`toggle-password-button`
Jelszó megjelenítési állapot váltógomb.
`show-password-icon`
A jelszó megjelenítése állapotban a jelszó megjelenítési állapot váltógombban lévő ikon.
`hide-password-icon`
A jelszó elrejtése állapotban a jelszó megjelenítési állapot váltógombban lévő ikon.
`supporting`
Az alsó súgó információk konténere, beleértve a helper-t, hibát és a számlálót.
`helper`
Az alsó súgó szöveg.
`error`
Az alsó hibaleíró szöveg.
`counter`
Az alsó jobb oldali karakterszámláló.

Előző fejezet

Tabs Fül

Következő fejezet

Tooltip Tooltip

TextFieldSzövegmező

Használat

Példák

Változat

Kiegészítő szöveg

Törölhető

Szöveg jobbra igazítása

Előtag és utótag szövegek és ikonok

Csak olvasható mód

Letiltott állapot

Többsoros szövegmező

Karakterszámláló

Jelszómező

API

Tulajdonságok

Metódusok

Események

Slots

CSS Parts