React
Maschere per numeri di telefono
Una maschera per il telefono formatta mentre si digita e tiene il numero in un valore separato: il dato salvato non contiene spazi né trattini.
In sintesi
- Le cifre si salvano senza separatori, la formattazione resta nel componente.
- La maschera non valida: un numero formattato può comunque essere inesistente.
- La cancellazione deve togliere una cifra, non un separatore.
Una maschera per il telefono formatta mentre si digita e tiene il numero completo in un valore separato: il dato salvato non deve contenere spazi, trattini o prefissi ambigui.
Formattare non è validare
La maschera decide dove vanno gli spazi; la validazione decide se il numero può esistere. Un campo che mostra +39 333 123 4567 può comunque avere una lunghezza sbagliata, quindi i due controlli restano separati.
function formatItalianPhone(raw) {
const digits = raw.replace(/\D/g, "").slice(0, 13);
if (digits.length <= 3) return digits;
if (digits.length <= 6) return digits.slice(0, 3) + " " + digits.slice(3);
return digits.slice(0, 3) + " " + digits.slice(3, 6) + " " + digits.slice(6);
}La raccomandazione ITU-T E.164 limita un numero internazionale a 15 cifre e ammette il prefisso +: è il formato da salvare, mentre la formattazione resta nel componente. Va verificata su almeno un numero italiano e uno estero, perché la lunghezza cambia.
Tre trappole
- Backspace sulla maschera: cancellare un separatore deve togliere una cifra, altrimenti il cursore si blocca.
- Incolla un numero completo: l'evento di incolla porta
+39e spazi, quindi la funzione deve normalizzare prima di formattare. - Larghezza fissa: i numeri esteri cambiano lunghezza, quindi il campo non deve avere una larghezza pensata per un solo paese.
Una dipendenza con licenza
npm install react-imaskreact-imask, distribuito con licenza MIT, applica la maschera sull'input nativo e restituisce il valore non formattato: la funzione scritta a mano resta utile quando la dipendenza è troppo.
Record vivi nel catalogo
Tre campi con formattazione: otp-input, otp-verify e credit-card-form. Per sfogliare per categoria parti da 111.985 componenti.
La limitazione
Nessuna maschera conosce i prefissi attivi: un numero può rispettare il formato e non esistere. La prova vera è un SMS o una chiamata, e finché non arriva il campo va trattato come non confermato.
Dove continuare
La scelta della libreria è in librerie form React; il controllo dei campi è in react-hook-form con shadcn; il confronto fra campo controllato e non controllato è in form controllati e non.
Domande frequenti
Devo salvare il numero con gli spazi?
No, si salvano solo le cifre con il prefisso internazionale. Gli spazi servono a leggere, non a identificare il numero.
Meglio scrivere la maschera o installarla?
Per un solo formato basta una funzione di poche righe. Con più paesi conviene react-imask, distribuito con licenza MIT.
Perché il cursore salta a fine campo?
Perché il valore viene riscritto a ogni tasto e la posizione del cursore si perde. Va ricalcolata o delegata alla libreria.
Il prefisso +39 va mostrato?
Sì se il pubblico è internazionale, perché chiarisce il paese. Con un pubblico solo italiano si può mostrare come testo fisso accanto al campo.
La maschera controlla che il numero esista?
No, controlla solo la forma. L'esistenza si prova con un SMS o una chiamata.