Input type number in HTML5 con supporto numeri decimali con virgola

Tra le moltissime funzioni utili introdotte dallo standard HTML5, una delle più utili è quella che consente di impostare una tipologia di dato agli elementi <input>: color, date, datetime-local, email, month, number, range, search, tel, time, url e week. Ciascuna di loro attiva un componente specifico del browser che consente all’utente di selezionare il valore desiderato in modo estremamente user-friendly, rendendo finalmente superflui tutti quei plugin jQuery, jQuery UI, Bootstrap et. al. che fino ad alcuni anni fa erano l’unico modo per ottenere lo stesso effetto… al costo però di appesantire notevolmente la componente client-side delle nostre pagine web.

Il supporto nativo dell’input type=”date” in Google Chrome, che comprende persino un piccolo calendario: spettacolare!

Purtroppo questa bella innovazione non è ancora priva di alcuni problemi, che dipendono in gran parte dal supporto che queste funzionalità hanno nei vari browser oggi utilizzati. Particolarmente fastidioso è un bug che affligge a tutt’oggi una delle tipologie più semplici, ovvero il number, nei casi in cui abbiamo bisogno di inserire valori con la virgola. Sorprendentemente, tra i “cattivi” della classe troviamo addirittura il browser Google Chrome, che per altri versi si comporta molto bene.

Partiamo dall’inizio: secondo quanto prescritto dalle specifiche W3C, il modo corretto per implementare il supporto di valori con vigola e decimali è aggiungere l’attributo step opportunamente configurato. Ad esempio, se vogliamo supportare due numeri decimali, questa è la sintassi corretta da applicare per il nostro elemento <input>:

Il problema è che questa impostazione viene interpretata correttamente solo nei casi in cui la localizzazione del browser e della pagina sia impostata su en-US, ovvero quando il separatore decimale è un punto (dot): in tutti gli altri casi, il numero viene accettato soltanto dal browser Mozilla Firefox, che consente correttamente l’utilizzo della virgola se la pagina web è impostata con una localizzazione corretta – for example, using  .

Ecco la situazione a inizio 2017, come opportunamente mostrato all’interno di questo thread su GitHub:

Input Firefox Chrome IE Edge Safari
123
123.45 (with region)
123,45 (with region)
123.45 (with region)
123,45 (with region)
123,456.78
123.456,78
10e-1

Inutile dire che uno scenario del genere costringe qualsiasi sviluppatore a non poter utilizzare gli     in qualsivoglia scenario multi-lingua, ricorrendo ancora una volta a un semplice     corredato dai consueti validatori/controlli JavaScript.

Nella speranza di poter essere d’aiuto a quanti si sono imbattuti in questo problema ho realizzato un semplice script basato su jQuery, che raccoglie i suggerimenti contenuti nei vari contributi presenti in questa discussione su StackOverflow consentendo di ottenere il risultato desiderato:

E’ sufficiente inserire questo script all’interno di un elemento <script> posto al termine del codice della pagina (e/o all’interno di un blocco jQuery    ), quindi assegnare la classe number a qualsiasi elemento <input> che si desidera validare in questo modo. Nel caso in cui si voglia anche convertire automaticamente i punti in virgole (o viceversa) è anche possibile utilizzare uno dei due blocchi if commentati.

Per il momento è tutto: felice sviluppo!

RELATED POSTS

About Ryan

IT Project Manager, Web Interface Architect e Lead Developer di numerosi siti e servizi web ad alto traffico in Italia e in Europa. Dal 2010 si occupa anche della progettazione di App e giochi per dispositivi Android, iOS e Mobile Phone per conto di numerose società italiane.

View all posts by Ryan