TextField

I campi di testo, tipicamente utilizzati in moduli e dialoghi, consentono agli utenti di inserire testo.

Utilizzo

Importa il componente:

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

Importa il tipo TypeScript:

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

Esempio:

<mdui-text-field label="Campo di testo"></mdui-text-field>

L'attributo helper o lo slot helper imposta il testo di supporto nella parte inferiore del campo di testo. Per visualizzare il testo di supporto solo quando l'input è focalizzato, usa l'attributo helper-on-focus.

Testo di supporto

<mdui-text-field label="Campo di testo" helper="Testo di supporto"></mdui-text-field>

<mdui-text-field label="Campo di testo">
  <span slot="helper" style="color: blue">Testo di supporto</span>
</mdui-text-field>

<mdui-text-field label="Campo di testo" helper="Testo di supporto" helper-on-focus></mdui-text-field>

Sorgente

Cancellabile

L'attributo clearable aggiunge un pulsante di cancellazione a destra quando il campo di testo ha un valore.

<mdui-text-field clearable label="Campo di testo" value="Testo inserito"></mdui-text-field>

Sorgente

Testo Allineato a Destra

L'attributo end-aligned allinea il testo a destra.

<mdui-text-field end-aligned label="Campo di testo" value="Testo inserito"></mdui-text-field>

Sorgente

Prefisso, Suffisso, Icone

Gli attributi o gli slot icon e end-icon aggiungono Icone Material rispettivamente a sinistra e a destra del campo di testo.

<mdui-text-field icon="search" end-icon="mic" label="Campo di testo"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Campo di testo">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

Sorgente

Gli attributi o gli slot prefix e suffix aggiungono testo a sinistra e a destra del campo di testo. Questo testo viene mostrato solo quando il campo di testo è focalizzato o ha un valore.

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Campo di testo"></mdui-text-field>

<br/><br/>

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

Sorgente

Solo Lettura

L'attributo readonly rende il campo di testo di sola lettura.

<mdui-text-field readonly label="Campo di testo" value="Testo inserito"></mdui-text-field>

Sorgente

Disabilitato

L'attributo disabled disabilita il campo di testo.

<mdui-text-field disabled label="Campo di testo" value="Testo inserito"></mdui-text-field>

Sorgente

Campo di Testo Multiriga

L'attributo rows imposta il numero di righe per un campo di testo multiriga.

<mdui-text-field rows="3" label="Campo di testo"></mdui-text-field>

Sorgente

Per regolare automaticamente l'altezza del campo di testo in base alla lunghezza dell'input, usa l'attributo autosize. Gli attributi min-rows e max-rows specificano il numero minimo e massimo di righe.

<mdui-text-field autosize label="Campo di testo"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Campo di testo"></mdui-text-field>

Sorgente

Contatore di Caratteri

L'attributo maxlength imposta il numero massimo di caratteri per il campo di testo. Per visualizzare un contatore di caratteri sotto il campo di testo, usa l'attributo counter.

<mdui-text-field maxlength="20" counter label="Campo di testo"></mdui-text-field>

Sorgente

Campo Password

Per i campi password (type="password"), l'attributo toggle-password aggiunge un pulsante a destra per alternare la visibilità della password.

<mdui-text-field type="password" toggle-password label="Campo di testo"></mdui-text-field>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Forma del campo di testo. Il valore predefinito è `filled`. I valori opzionali includono: `filled`: campo di testo con colore di sfondo, effetto visivo più forte `outlined`: campo di testo con bordo, effetto visivo più debole
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
Tipo di input del campo di testo. Il valore predefinito è `text`. I valori opzionali includono: `text`: valore predefinito. Campo di testo `number`: può essere inserito solo numeri. Sui dispositivi con tastiera dinamica viene mostrata la tastiera numerica `password`: utilizzato per inserire password, il valore viene mascherato `url`: utilizzato per inserire URL, viene convalidato il formato URL. Sui dispositivi con tastiera dinamica è disponibile una tastiera corrispondente `email`: utilizzato per inserire indirizzi email, viene convalidato il formato email. Sui dispositivi con tastiera dinamica è disponibile una tastiera corrispondente `search`: utilizzato per le caselle di ricerca. Sui dispositivi con tastiera dinamica, l'icona Invio si trasforma in un'icona di ricerca `tel`: utilizzato per inserire numeri di telefono. Sui dispositivi con tastiera dinamica viene mostrata la tastiera numerica del telefono `hidden`: nasconde il controllo, ma il suo valore viene comunque inviato al server `date`: controllo per l'inserimento di una data (anno, mese, giorno, esclusa l'ora). Nei browser supportati, all'attivazione apre un selettore di data o una rotella numerica per anno, mese e giorno `datetime-local`: controllo per l'inserimento di data e ora, escluso il fuso orario. Nei browser supportati, all'attivazione apre un selettore di data o una rotella numerica per anno, mese e giorno `month`: controllo per l'inserimento di anno e mese, senza fuso orario `time`: controllo per l'inserimento dell'ora, escluso il fuso orario `week`: controllo per l'inserimento di una data composta da anno e numero di settimana, senza fuso orario
`name`	`name`	`string`	`''`
Nome del campo di testo, verrà inviato insieme ai dati del modulo
`value`	`value`	`string`	`''`
Valore del campo di testo, verrà inviato insieme ai dati del modulo
	`defaultValue`	`string`	`''`
Valore predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
`label`	`label`	`string`	-
Testo dell'etichetta
`placeholder`	`placeholder`	`string`	-
Testo del segnaposto
`helper`	`helper`	`string`	-
Testo di aiuto nella parte inferiore del campo di testo. Può anche essere impostato tramite `slot="helper"`.
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
Se mostrare il testo di aiuto nella parte inferiore solo quando si riceve il focus
`clearable`	`clearable`	`boolean`	`false`
Se è possibile svuotare il contenuto del campo di testo
`clear-icon`	`clearIcon`	`string`	-
Nome dell'icona Material per il pulsante di cancellazione visualizzato a destra del campo di testo quando è cancellabile. Può anche essere impostato tramite `slot="clear-icon"`.
`end-aligned`	`endAligned`	`boolean`	`false`
Se allineare il testo a destra
`prefix`	`prefix`	`string`	-
Testo del prefisso del campo di testo. Viene visualizzato solo quando il campo di testo è in focus o ha un valore. Può anche essere impostato tramite `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Testo del suffisso del campo di testo. Viene visualizzato solo quando il campo di testo è in focus o ha un valore. Può anche essere impostato tramite `slot="suffix"`.
`icon`	`icon`	`string`	-
Nome dell'icona Material per l'icona del prefisso del campo di testo. Può anche essere impostato tramite `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nome dell'icona Material per l'icona del suffisso del campo di testo. Può anche essere impostato tramite `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Nome dell'icona Material visualizzata a destra del campo di testo quando la convalida del campo del modulo fallisce. Può anche essere impostato tramite `slot="error-icon"`.
`form`	`form`	`string`	-
Elemento `<form>` associato. Il valore di questo attributo deve essere l'`id` di un elemento `<form>` nella stessa pagina. Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento `<form>`. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Se è in modalità di sola lettura
`disabled`	`disabled`	`boolean`	`false`
Se il campo di input deve essere disabilitato
`required`	`required`	`boolean`	`false`
Se è obbligatorio compilare questo campo al momento dell'invio del modulo
`rows`	`rows`	`number`	-
Numero di righe fisse visualizzate per il campo di testo
`autosize`	`autosize`	`boolean`	`false`
Se regolare automaticamente l'altezza del campo di testo in base al contenuto inserito
`min-rows`	`minRows`	`number`	-
Quando `autosize` è `true`, il numero minimo di righe del campo di testo
`max-rows`	`maxRows`	`number`	-
Quando `autosize` è `true`, il numero massimo di righe del campo di testo
`minlength`	`minlength`	`number`	-
Numero minimo di caratteri consentito
`maxlength`	`maxlength`	`number`	-
Numero massimo di caratteri consentito
`counter`	`counter`	`boolean`	`false`
Se mostrare il conteggio dei caratteri, valido solo quando è specificato `maxlength`.
`min`	`min`	`number`	-
Quando `type` è `number`, il valore numerico minimo consentito
`max`	`max`	`number`	-
Quando `type` è `number`, il valore numerico massimo consentito
`step`	`step`	`number`	-
Quando `type` è `number`, il passo di incremento/decremento del valore
`pattern`	`pattern`	`string`	-
Espressione regolare per la convalida del modulo
`toggle-password`	`togglePassword`	`boolean`	`false`
Quando `type` è `password`, impostando questo attributo si aggiunge un pulsante di commutazione per passare da testo in chiaro a testo mascherato.
`show-password-icon`	`showPasswordIcon`	`string`	-
Icona Material per il pulsante di commutazione della password, visualizzata quando la password è in chiaro. Può anche essere impostato tramite `slot="show-password-icon"`.
`hide-password-icon`	`hidePasswordIcon`	`string`	-
Icona Material per il pulsante di commutazione della password, visualizzata quando la password è mascherata. Può anche essere impostato tramite `slot="hide-password-icon"`.
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
Attributo non standard di iOS, utilizzato per controllare se la prima lettera del testo deve essere automaticamente in maiuscolo. Valido su iOS5 e versioni successive. I valori opzionali includono: `none`: disabilita la maiuscola automatica `sentences`: maiuscola all'inizio della frase `words`: maiuscola all'inizio di ogni parola `characters`: tutte le lettere maiuscole
`autocorrect`	`autocorrect`	`string`	-
Attributo `autocorrect` dell'elemento `input`.
`autocomplete`	`autocomplete`	`string`	-
Attributo `autocomplete` dell'elemento `input`.
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
Attributo `enterkeyhint` dell'elemento `input`, utilizzato per personalizzare il testo o l'icona visualizzati sul tasto Invio della tastiera virtuale. L'aspetto effettivo dipende dal dispositivo e dalla lingua utilizzati dall'utente. I valori opzionali includono: `enter`: inserisce una nuova riga `done`: termina l'inserimento, chiude la tastiera virtuale `go`: passa alla destinazione del testo inserito `next`: passa all'elemento di input successivo `previous`: passa all'elemento di input precedente `search`: passa ai risultati di ricerca `send`: invia il messaggio di testo
`spellcheck`	`spellcheck`	`boolean`	`false`
Se abilitare il controllo ortografico
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
Attributo `inputmode` dell'elemento `input`, utilizzato per personalizzare il tipo di tastiera virtuale. I valori opzionali includono: `none`: nessuna tastiera virtuale. Utile quando si vuole implementare un proprio controllo di input da tastiera `text`: tastiera di input di testo standard `decimal`: tastiera di input per numeri decimali, oltre ai numeri può avere il punto decimale `.` o la virgola delle migliaia `,` `numeric`: mostra la tastiera numerica 0-9 `tel`: tastiera numerica del telefono, include i numeri 0-9, l'asterisco `*` o il cancelletto `#` `search`: tastiera virtuale ottimizzata per l'input di ricerca, il pulsante di invio di solito mostra `search` o "Cerca" `email`: tastiera virtuale ottimizzata per l'input di indirizzi email, di solito include tasti come `@ .` `url`: tastiera virtuale ottimizzata per l'input di URL, di solito include tasti come `. / #`
	`validity`	`ValidityState`	-
Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a `ValidityState`
	`validationMessage`	`string`	-
Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
	`valueAsNumber`	`number`	-
Ottiene il valore corrente e lo converte in tipo `number`; o imposta un valore di tipo `number`. Se il valore non può essere convertito in tipo `number`, restituisce `NaN`.
`autofocus`	`autofocus`	`boolean`	`false`
Se deve ricevere automaticamente il focus al caricamento della pagina
`tabindex`	`tabIndex`	`number`	-
Ordine di tabulazione dell'elemento

Metodi

Nome	Parametri	Restituisce
`select`		`void`
Seleziona il testo nel campo di testo
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
Seleziona un intervallo specifico di contenuto nel campo di testo
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
Sostituisce il testo in un intervallo specifico del campo di testo con un nuovo testo
`checkValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`
`reportValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`. Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
`setCustomValidity`	`message: string`	`void`
Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
`click`		`void`
Simula un clic del mouse sull'elemento
`focus`	`options: FocusOptions` (Opzionale)	`void`
Imposta il focus sull'elemento corrente. È possibile passare un oggetto come parametro, le cui proprietà includono: `preventScroll`: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su `true`.
`blur`		`void`
Rimuove il focus dall'elemento corrente

Eventi

Nome
`focus`
Attivato quando si riceve il focus
`blur`
Attivato quando si perde il focus
`change`
Attivato quando il valore del campo di testo cambia e si perde il focus
`input`
Attivato quando il valore del campo di testo cambia
`invalid`
Attivato quando la convalida del campo del modulo non viene superata
`clear`
Attivato quando si fa clic sul pulsante di cancellazione generato dall'attributo `clearable`. È possibile impedire la cancellazione del campo di testo chiamando `event.preventDefault()`.

Slots

Nome
`icon`
Icona a sinistra
`end-icon`
Icona a destra
`error-icon`
Icona a destra nello stato di errore di convalida
`prefix`
Testo a sinistra
`suffix`
Testo a destra
`clear-button`
Pulsante di cancellazione
`clear-icon`
Icona nel pulsante di cancellazione
`toggle-password-button`
Pulsante per mostrare o nascondere la password
`show-password-icon`
Icona del pulsante quando la password è visibile
`hide-password-icon`
Icona del pulsante quando la password è nascosta
`helper`
Testo di aiuto in basso

CSS Parts

Nome
`container`
Contenitore del campo di testo
`icon`
Icona a sinistra
`end-icon`
Icona a destra
`error-icon`
Icona a destra nello stato di errore di convalida
`prefix`
Testo a sinistra
`suffix`
Testo a destra
`label`
Testo dell'etichetta in alto
`input`
Elemento `<input>` o `<textarea>` interno
`clear-button`
Pulsante di cancellazione
`clear-icon`
Icona nel pulsante di cancellazione
`toggle-password-button`
Pulsante per mostrare o nascondere la password
`show-password-icon`
Icona del pulsante quando la password è visibile
`hide-password-icon`
Icona del pulsante quando la password è nascosta
`supporting`
Contenitore delle informazioni di supporto nella parte inferiore, inclusi helper, error e counter
`helper`
Testo di aiuto nella parte inferiore
`error`
Testo di descrizione dell'errore nella parte inferiore
`counter`
Conteggio dei caratteri in basso a destra

Capitolo precedente

Tabs

Capitolo successivo

Tooltip

TextField

Utilizzo

Esempi

Variante

Testo di Supporto

Cancellabile

Testo Allineato a Destra

Prefisso, Suffisso, Icone

Solo Lettura

Disabilitato

Campo di Testo Multiriga

Contatore di Caratteri

Campo Password

API

Proprietà

Metodi

Eventi

Slots

CSS Parts