TextFieldPole tekstowe

Komponent pola tekstowego umożliwia wprowadzanie tekstu. Często stosowane w formularzach i oknach dialogowych.

Sposób użycia

Zaimportuj komponent:

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

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

<mdui-text-field label="Pole tekstowe"></mdui-text-field>

Atrybut helper ustawia tekst pomocniczy na dole pola tekstowego. Możesz również użyć slotu helper. Dodanie atrybutu helper-on-focus powoduje wyświetlanie tekstu pomocniczego tylko wtedy, gdy pole jest skupione.

Tekst pomocniczy

<mdui-text-field label="Pole tekstowe" helper="Tekst pomocniczy"></mdui-text-field>

<mdui-text-field label="Pole tekstowe">
  <span slot="helper" style="color: blue">Tekst pomocniczy</span>
</mdui-text-field>

<mdui-text-field label="Pole tekstowe" helper="Tekst pomocniczy" helper-on-focus></mdui-text-field>

Źródło

Możliwość wyczyszczenia

Dodanie atrybutu clearable powoduje pojawienie się przycisku czyszczenia po prawej stronie, gdy pole tekstowe ma wartość.

<mdui-text-field clearable label="Pole tekstowe" value="Wprowadzony tekst"></mdui-text-field>

Źródło

Wyrównanie tekstu do prawej

Dodanie atrybutu end-aligned powoduje wyrównanie tekstu do prawej.

<mdui-text-field end-aligned label="Pole tekstowe" value="Wprowadzony tekst"></mdui-text-field>

Źródło

Tekst i ikony przed i po

Ustaw atrybuty icon i end-icon, aby dodać ikony Material Icons odpowiednio po lewej i prawej stronie pola tekstowego. Możesz również użyć slotów icon i end-icon do dodania elementów.

<mdui-text-field icon="search" end-icon="mic" label="Pole tekstowe"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Pole tekstowe">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

Źródło

Ustaw atrybuty prefix i suffix, aby dodać tekst odpowiednio po lewej i prawej stronie pola tekstowego. Możesz również użyć slotów prefix i suffix do dodania elementów tekstowych. Te teksty są wyświetlane tylko wtedy, gdy pole tekstowe jest skupione lub ma wartość.

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Pole tekstowe"></mdui-text-field>

<br/><br/>

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

Źródło

Tryb tylko do odczytu

Dodanie atrybutu readonly ustawia pole tekstowe w tryb tylko do odczytu.

<mdui-text-field readonly label="Pole tekstowe" value="Wprowadzony tekst"></mdui-text-field>

Źródło

Stan wyłączony

Dodanie atrybutu disabled wyłącza pole tekstowe.

<mdui-text-field disabled label="Pole tekstowe" value="Wprowadzony tekst"></mdui-text-field>

Źródło

Wielowierszowe pole tekstowe

Atrybut rows ustawia liczbę wierszy dla wielowierszowego pola tekstowego.

<mdui-text-field rows="3" label="Pole tekstowe"></mdui-text-field>

Źródło

Możesz również dodać atrybut autosize, aby pole tekstowe automatycznie dostosowywało wysokość do długości wprowadzanego tekstu. Użyj atrybutów min-rows i max-rows, aby określić odpowiednio minimalną i maksymalną liczbę wierszy podczas automatycznego dostosowywania wysokości.

<mdui-text-field autosize label="Pole tekstowe"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Pole tekstowe"></mdui-text-field>

Źródło

Licznik znaków

Gdy maksymalna liczba znaków jest ustawiona za pomocą atrybutu maxlength, możesz dodać atrybut counter, aby wyświetlić licznik znaków pod polem tekstowym.

<mdui-text-field maxlength="20" counter label="Pole tekstowe"></mdui-text-field>

Źródło

Pole hasła

Gdy type="password", dodanie atrybutu toggle-password powoduje pojawienie się przycisku przełączania widoczności hasła po prawej stronie pola tekstowego.

<mdui-text-field type="password" toggle-password label="Pole tekstowe"></mdui-text-field>

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Wariant pola tekstowego. Domyślnie `filled`. Dozwolone wartości: `filled`: Pole tekstowe z kolorem tła, silniejszy efekt wizualny `outlined`: Pole tekstowe z obramowaniem, słabszy efekt wizualny
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
Typ wprowadzania w polu tekstowym. Domyślnie `text`. Dozwolone wartości: `text`: Domyślnie pole tekstowe `number`: Można wprowadzać tylko cyfry. Na urządzeniach z dynamiczną klawiaturą wyświetlana jest klawiatura numeryczna `password`: Służy do wprowadzania hasła, jego wartość jest maskowana `url`: Służy do wprowadzania adresu URL, sprawdzany jest format URL. Na urządzeniach obsługujących dynamiczną klawiaturę dostępna jest odpowiednia klawiatura `email`: Służy do wprowadzania adresu e-mail, sprawdzany jest format e-mail. Na urządzeniach obsługujących dynamiczną klawiaturę dostępna jest odpowiednia klawiatura `search`: Służy do pola wyszukiwania. Na urządzeniach z dynamiczną klawiaturą ikona Enter zmienia się w ikonę wyszukiwania `tel`: Służy do wprowadzania numeru telefonu. Na urządzeniach z dynamiczną klawiaturą wyświetlana jest klawiatura numeryczna telefonu `hidden`: Ukrywa ten element, ale jego wartość nadal jest przesyłana do serwera `date`: Element do wprowadzania daty (rok, miesiąc, dzień, bez czasu). Po aktywacji w obsługiwanych przeglądarkach otwiera selektor daty lub pokrętło numeryczne dla roku, miesiąca i dnia `datetime-local`: Element do wprowadzania daty i czasu, bez strefy czasowej. Po aktywacji w obsługiwanych przeglądarkach otwiera selektor daty lub pokrętło numeryczne dla roku, miesiąca i dnia `month`: Element do wprowadzania roku i miesiąca, bez strefy czasowej `time`: Element do wprowadzania czasu, bez strefy czasowej `week`: Element do wprowadzania daty w formacie roku i numeru tygodnia, bez strefy czasowej
`name`	`name`	`string`	`''`
Nazwa pola tekstowego, która zostanie wysłana wraz z danymi formularza
`value`	`value`	`string`	`''`
Wartość pola tekstowego, która zostanie wysłana wraz z danymi formularza
	`defaultValue`	`string`	`''`
Wartość domyślna. Po zresetowaniu formularza zostanie przywrócona do tej wartości. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
`label`	`label`	`string`	-
Tekst etykiety
`placeholder`	`placeholder`	`string`	-
Tekst zastępczy
`helper`	`helper`	`string`	-
Tekst pomocniczy pod polem tekstowym. Można również ustawić za pomocą `slot="helper"`
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
Określa, czy wyświetlać tekst pomocniczy na dole tylko wtedy, gdy pole uzyska fokus.
`clearable`	`clearable`	`boolean`	`false`
Określa, czy można wyczyścić zawartość pola tekstowego.
`clear-icon`	`clearIcon`	`string`	-
Nazwa ikony Material Icons dla przycisku czyszczenia wyświetlanego po prawej stronie pola tekstowego, gdy pole jest możliwe do wyczyszczenia. Można również ustawić za pomocą `slot="clear-icon"`
`end-aligned`	`endAligned`	`boolean`	`false`
Określa, czy wyrównać tekst do prawej.
`prefix`	`prefix`	`string`	-
Tekst prefiksu pola tekstowego. Wyświetlany tylko wtedy, gdy pole ma fokus lub ma wartość. Można również ustawić za pomocą `slot="prefix"`
`suffix`	`suffix`	`string`	-
Tekst sufiksu pola tekstowego. Wyświetlany tylko wtedy, gdy pole ma fokus lub ma wartość. Można również ustawić za pomocą `slot="suffix"`
`icon`	`icon`	`string`	-
Nazwa ikony Material Icons dla ikony prefiksu pola tekstowego. Można również ustawić za pomocą `slot="icon"`
`end-icon`	`endIcon`	`string`	-
Nazwa ikony Material Icons dla ikony sufiksu pola tekstowego. Można również ustawić za pomocą `slot="end-icon"`
`error-icon`	`errorIcon`	`string`	-
Nazwa ikony Material Icons wyświetlana po prawej stronie pola tekstowego, gdy walidacja pola formularza nie powiedzie się. Można również ustawić za pomocą `slot="error-icon"`
`form`	`form`	`string`	-
Powiązany element `<form>`. Wartość tego atrybutu powinna być `id` elementu `<form>` na tej samej stronie. Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu `<form>`. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Określa, czy pole jest tylko do odczytu.
`disabled`	`disabled`	`boolean`	`false`
Określa, czy pole tekstowe jest wyłączone.
`required`	`required`	`boolean`	`false`
Określa, czy wypełnienie pola jest wymagane podczas przesyłania formularza.
`rows`	`rows`	`number`	-
Stała liczba wyświetlanych wierszy pola tekstowego
`autosize`	`autosize`	`boolean`	`false`
Określa, czy automatycznie dostosowywać wysokość pola tekstowego do wprowadzanej treści.
`min-rows`	`minRows`	`number`	-
Minimalna liczba wierszy pola tekstowego, gdy `autosize` ma wartość `true`
`max-rows`	`maxRows`	`number`	-
Maksymalna liczba wierszy pola tekstowego, gdy `autosize` ma wartość `true`
`minlength`	`minlength`	`number`	-
Minimalna dozwolona liczba znaków
`maxlength`	`maxlength`	`number`	-
Maksymalna dozwolona liczba znaków
`counter`	`counter`	`boolean`	`false`
Określa, czy wyświetlać licznik znaków. Działa tylko wtedy, gdy określono `maxlength`.
`min`	`min`	`number`	-
Określa minimalną dozwoloną wartość liczbową, gdy `type` ma wartość `number`.
`max`	`max`	`number`	-
Określa maksymalną dozwoloną wartość liczbową, gdy `type` ma wartość `number`.
`step`	`step`	`number`	-
Określa krok zmiany wartości, gdy `type` ma wartość `number`.
`pattern`	`pattern`	`string`	-
Wyrażenie regularne używane do walidacji formularza
`toggle-password`	`togglePassword`	`boolean`	`false`
Gdy `type` to `password`, ustawienie tego atrybutu doda przycisk przełączania między tekstem jawnym a zasłoniętym
`show-password-icon`	`showPasswordIcon`	`string`	-
Ikona Material Icons dla przycisku przełączania hasła, wyświetlana, gdy hasło jest jawne. Można również ustawić za pomocą `slot="show-password-icon"`
`hide-password-icon`	`hidePasswordIcon`	`string`	-
Ikona Material Icons dla przycisku przełączania hasła, wyświetlana, gdy hasło jest zasłonięte. Można również ustawić za pomocą `slot="hide-password-icon"`
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
Niestandardowy atrybut iOS, służy do kontrolowania automatycznej wielkości pierwszej litery tekstu. Działa w iOS5 i nowszych wersjach. Dozwolone wartości: `none`: Wyłącza automatyczne wielkie litery `sentences`: Pierwsza litera zdania dużą literą `words`: Pierwsza litera słowa dużą literą `characters`: Wszystkie litery duże
`autocorrect`	`autocorrect`	`string`	-
Atrybut `autocorrect` elementu `input`
`autocomplete`	`autocomplete`	`string`	-
Atrybut `autocomplete` elementu `input`
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
Atrybut `enterkeyhint` elementu `input`, służy do dostosowania tekstu lub ikony wyświetlanej na klawiszu Enter na klawiaturze wirtualnej. Dokładny efekt wyświetlania zależy od urządzenia i języka użytkownika. Dozwolone wartości: `enter`: Wstaw nowy wiersz `done`: Zakończ wprowadzanie, zamknij klawiaturę wirtualną `go`: Przejdź do celu wprowadzonego tekstu `next`: Przejdź do następnego elementu wprowadzania `previous`: Przejdź do poprzedniego elementu wprowadzania `search`: Przejdź do wyników wyszukiwania `send`: Wyślij wiadomość tekstową
`spellcheck`	`spellcheck`	`boolean`	`false`
Określa, czy włączyć sprawdzanie pisowni.
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
Atrybut `inputmode` elementu `input`, służy do dostosowania typu klawiatury wirtualnej. Dozwolone wartości: `none`: Brak klawiatury wirtualnej. Przydatne, gdy chcesz zaimplementować własny element sterujący wprowadzaniem z klawiatury `text`: Standardowa klawiatura do wprowadzania tekstu `decimal`: Klawiatura do wprowadzania liczb dziesiętnych, oprócz cyfr może zawierać kropkę dziesiętną `.` lub przecinek jako separator tysięcy `,` `numeric`: Wyświetla klawiaturę numeryczną 0-9 `tel`: Klawiatura numeryczna telefonu, zawiera cyfry 0-9, gwiazdkę `*` lub krzyżyk `#` `search`: Klawiatura wirtualna zoptymalizowana do wprowadzania wyszukiwania, przycisk przesyłania zwykle wyświetla `search` lub „Szukaj” `email`: Klawiatura wirtualna zoptymalizowana do wprowadzania adresu e-mail, zwykle zawiera klawisze `@ .` `url`: Klawiatura wirtualna zoptymalizowana do wprowadzania adresu URL, zwykle zawiera klawisze `. / #`
	`validity`	`ValidityState`	-
Obiekt stanu walidacji formularza, zobacz `ValidityState`
	`validationMessage`	`string`	-
Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
	`valueAsNumber`	`number`	-
Pobiera bieżącą wartość i konwertuje ją na typ `number`; lub ustawia wartość typu `number`. Jeśli wartość nie może być przekonwertowana na typ `number`, zwracane jest `NaN`.
`autofocus`	`autofocus`	`boolean`	`false`
Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
`tabindex`	`tabIndex`	`number`	-
Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).

Metody

Nazwa	Parametry	Zwraca
`select`		`void`
Zaznacza tekst w polu tekstowym
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
Zaznacza określony zakres w polu tekstowym
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
Zastępuje tekst w określonym zakresie w polu tekstowym nowym tekstem
`checkValidity`		`boolean`
Sprawdza poprawność pola formularza. Jeśli nie, zwraca `false` i wywołuje zdarzenie `invalid`; jeśli tak, zwraca `true`
`reportValidity`		`boolean`
Sprawdza poprawność pola formularza. Jeśli nie, zwraca `false` i wywołuje zdarzenie `invalid`; jeśli tak, zwraca `true`. Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
`setCustomValidity`	`message: string`	`void`
Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
`click`		`void`
Symuluje kliknięcie myszą na elemencie
`focus`	`options: FocusOptions` (Opcjonalny)	`void`
Przenosi fokus na bieżący element. Można przekazać obiekt jako parametr, którego właściwości obejmują: `preventScroll`: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na `true`.
`blur`		`void`
Usuwa fokus z bieżącego elementu

Zdarzenia

Nazwa
`focus`
Wywoływane po otrzymaniu fokusu
`blur`
Wywoływane po utracie fokusu
`change`
Wywoływane, gdy wartość pola tekstowego ulegnie zmianie i pole straci fokus
`input`
Wywoływane przy każdej zmianie wartości pola tekstowego
`invalid`
Wywoływane, gdy pole formularza nie przejdzie walidacji
`clear`
Wywoływane po kliknięciu przycisku czyszczenia generowanego przez atrybut `clearable`. Można zapobiec wyczyszczeniu pola tekstowego, wywołując `event.preventDefault()`

Slots

Nazwa
`icon`
Ikona po lewej stronie
`end-icon`
Ikona po prawej stronie
`error-icon`
Ikona po prawej stronie w stanie błędu walidacji
`prefix`
Tekst po lewej stronie
`suffix`
Tekst po prawej stronie
`clear-button`
Przycisk czyszczenia
`clear-icon`
Ikona w przycisku czyszczenia
`toggle-password-button`
Przycisk przełączania stanu wyświetlania hasła
`show-password-icon`
Ikona w przycisku przełączania stanu wyświetlania hasła, gdy hasło jest wyświetlane
`hide-password-icon`
Ikona w przycisku przełączania stanu wyświetlania hasła, gdy hasło jest ukryte
`helper`
Tekst pomocniczy na dole

CSS Parts

Nazwa
`container`
Kontener pola tekstowego
`icon`
Ikona po lewej stronie
`end-icon`
Ikona po prawej stronie
`error-icon`
Ikona po prawej stronie w stanie błędu walidacji
`prefix`
Tekst po lewej stronie
`suffix`
Tekst po prawej stronie
`label`
Tekst etykiety u góry
`input`
Wewnętrzny element `<input>` lub `<textarea>`
`clear-button`
Przycisk czyszczenia
`clear-icon`
Ikona w przycisku czyszczenia
`toggle-password-button`
Przycisk przełączania stanu wyświetlania hasła
`show-password-icon`
Ikona w przycisku przełączania stanu wyświetlania hasła, gdy hasło jest wyświetlane
`hide-password-icon`
Ikona w przycisku przełączania stanu wyświetlania hasła, gdy hasło jest ukryte
`supporting`
Kontener na dodatkowe informacje na dole, obejmujący helper, error, counter
`helper`
Tekst pomocniczy na dole
`error`
Tekst opisu błędu na dole
`counter`
Licznik znaków po prawej stronie na dole

Poprzedni rozdział

Tabs Zakładka

Następny rozdział

Tooltip Tooltip

TextFieldPole tekstowe

Sposób użycia

Przykłady

Kształt

Tekst pomocniczy

Możliwość wyczyszczenia

Wyrównanie tekstu do prawej

Tekst i ikony przed i po

Tryb tylko do odczytu

Stan wyłączony

Wielowierszowe pole tekstowe

Licznik znaków

Pole hasła

API

Właściwości

Metody

Zdarzenia

Slots

CSS Parts