Input type number in HTML5 con supporto numeri decimali con virgola

Ryan

8 anni fa

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!

Input type number in HTML5 con supporto numeri decimali con virgola — 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>:

<input type="number" step="0.01">

1	<input type="number" step="0.01">

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 <body lang="it"> .

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 <input type="number"> in qualsivoglia scenario multi-lingua, ricorrendo ancora una volta a un semplice <input type="text"> 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:

// client-side validation of numeric inputs, optionally replacing separator sign(s).
$("input.number").on("keydown", function (e) {
    // allow function keys and decimal separators
    if (
        // backspace, delete, tab, escape, enter, comma and .
        $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 188, 190]) !== -1 ||
        // Ctrl/cmd+A, Ctrl/cmd+C, Ctrl/cmd+X
        ($.inArray(e.keyCode, [65, 67, 88]) !== -1 && (e.ctrlKey === true || e.metaKey === true)) ||
        // home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {

        /*
        // optional: replace commas with dots in real-time (for en-US locals)
        if (e.keyCode === 188) {
            e.preventDefault();
            $(this).val($(this).val() + ".");
        }

        // optional: replace decimal points (num pad) and dots with commas in real-time (for EU locals)
        if (e.keyCode === 110 || e.keyCode === 190) {
            e.preventDefault();
            $(this).val($(this).val() + ",");
        }
        */

        return;
    }
    // block any non-number
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

// client-side validation of numeric inputs, optionally replacing separator sign(s).

$("input.number").on("keydown", function (e) {

// allow function keys and decimal separators

if (

// backspace, delete, tab, escape, enter, comma and .

$.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 188, 190]) !== -1 ||

// Ctrl/cmd+A, Ctrl/cmd+C, Ctrl/cmd+X

($.inArray(e.keyCode, [65, 67, 88]) !== -1 && (e.ctrlKey === true || e.metaKey === true)) ||

// home, end, left, right

(e.keyCode >= 35 && e.keyCode <= 39)) {

// optional: replace commas with dots in real-time (for en-US locals)

if (e.keyCode === 188) {

e.preventDefault();

$(this).val($(this).val() + ".");

}

// optional: replace decimal points (num pad) and dots with commas in real-time (for EU locals)

if (e.keyCode === 110 || e.keyCode === 190) {

e.preventDefault();

$(this).val($(this).val() + ",");

}

return;

}

// block any non-number

if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {

e.preventDefault();

}

});

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 $(function() {}) ), 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.

UPDATE: Ho creato un JSFiddle contenente il codice di esempio di cui sopra per chi volesse testarlo direttamente online.

Per il momento è tutto: felice sviluppo!

Print Friendly & PDF Download