Forza la virgola decimale anziché la virgola nell’immissione del numero HTML5 (lato client)

Ho visto che alcuni browser localizzano il input type="number" notazione di numeri.

Così ora, nei campi in cui la mia applicazione visualizza le coordinate di longitudine e latitudine, ottengo cose come “51,983” dove dovrebbe essere “51.982559”. La mia soluzione alternativa è usare invece input type="text" , ma mi piacerebbe usare il numero di input con la corretta visualizzazione dei decimali.

C’è un modo per forzare i browser a utilizzare un punto decimale nel numero inserito, indipendentemente dalle impostazioni locali sul lato client?

(Va da sé che nella mia applicazione ho comunque corretto questo lato server, ma nel mio setup ho anche bisogno che sia corretto sul lato client (a causa di qualche JavaScript)).

Grazie in anticipo.

AGGIORNAMENTO A partire da ora, controllando la versione di Chrome 28.0.1500.71 su Windows 7, il numero inserito non accetta decimali formattati con una virgola. I suggerimenti proposti con l’attributo step non sembrano funzionare.

http://jsfiddle.net/AsJsj/

Con l’attributo step specificato per la precisione dei decimali desiderati, l’input numerico html5 accetterà i decimali. per esempio. prendere valori come 10.56; Voglio dire 2 numeri decimali, fare questo:

  

È inoltre ansible specificare l’attributo max per il valore massimo consentito.

Modifica Aggiungi un attributo lang all’elemento di input con un valore di locale che formatta i decimali con il punto anziché con la virgola

Attualmente Firefox rispetta la lingua dell’elemento HTML in cui risiede l’input. Ad esempio, prova questo violino in Firefox:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

Vedrai che i numeri sono in arabo e la virgola viene usata come separatore decimale, come nel caso dell’arabo. Questo perché il tag BODY l’attributo lang="ar-EG" .

Quindi, prova questo:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

Questo viene visualizzato con un punto come separatore decimale poiché l’input è racchiuso in un DIV dato l’attributo lang="en-US" .

Quindi, una soluzione a cui potresti ricorrere è racchiudere i tuoi input numerici con un elemento contenitore impostato per utilizzare una cultura che utilizza punti come separatore decimale.

In base alle specifiche , puoi utilizzare any come valore dell’attributo step :

  

Purtroppo, la copertura di questo campo di input nei browser moderni è molto bassa:

http://caniuse.com/#feat=input-number

Pertanto, mi raccomando di aspettarmi il fallback e fare affidamento su un input caricato pesantemente a livello di codice [tipo = testo] per fare il lavoro, fino a quando il campo è generalmente accettato.

Finora, solo Chrome, Safari e Opera hanno un’implementazione chiara, ma tutti gli altri browser sono bacati. Alcuni di loro, non sembrano nemmeno supportare i decimali (come BB10)!

Non so se questo aiuti, ma sono inciampato qui durante la ricerca di questo stesso problema, solo da un punto di vista dell’input (cioè ho notato che il mio stava accettando sia una virgola che un punto quando digitando il valore, ma solo quest’ultimo è stato associato al modello angularjs che ho assegnato all’input). Così ho risolto annotando questa direttiva veloce:

 .directive("replaceComma", function() { return { restrict: "A", link: function(scope, element) { element.on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); } }); } }; }); 

Quindi, sul mio html, semplicemente: sostituirà le virgole con punti al volo per impedire l’inserimento degli utenti non valido (da un punto di vista javascript, non uno locale!) numeri. Saluti.

Ho trovato un articolo del blog che sembra spiegare qualcosa di correlato: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

In sintesi:

  • il step aiuta a definire il dominio dei valori validi
  • il step predefinito è 1
  • quindi il dominio predefinito è numeri interi (tra min e max , inclusi, se specificati)

Immagino che ciò si confonda con l’ambiguità dell’uso di una virgola come un separatore di migliaia contro una virgola come un punto decimale, e il tuo 51,983 è in realtà uno stranamente parsed cinquantunmilanovecentottantatre.

Apparentemente puoi usare step="any" per allargare il dominio a tutti i numeri razionali nell’intervallo, tuttavia non l’ho provato io stesso. Per latitudine e longitudine ho usato con successo:

   

Potrebbe non essere carino, ma funziona.

Modifica: il link aggiornato è https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome/

1) 51,983 è un numero di tipo stringa non accetta la virgola

quindi dovresti impostarlo come testo

  

sostituirlo con .

e cambia l’attributo type in number

 $(document).ready(function() { var s = $('#commanumber').val().replace(/\,/g, '.'); $('#commanumber').attr('type','number'); $('#commanumber').val(s); }); 

Dai un’occhiata a http://jsfiddle.net/ydf3kxgu/

Spero che questo risolva il tuo problema

Per quanto ho capito, il input type="number HTML5 input type="number restituisce sempre input.value come string .

Apparentemente, input.valueAsNumber restituisce il valore corrente come numero in virgola mobile. Potresti usare questo per restituire un valore che desideri.

Vedi http://diveintohtml5.info/forms.html#type-number

Hai preso in considerazione l’utilizzo di Javascript per questo?

$('input').val($('input').val().replace(',', '.'));

una opzione è javascript parseFloat() … non analizza mai una ” text chain" --> 12.3456 con punto per un int … 123456 (int rimuovi il punto) analizza una catena di testo su un FLOAT …

per inviare questo comando ad un server, fai questo inviando una catena di testo. HTTP invia solo TEXT

nel client mantieni l’analisi delle stringhe di input con ” int “, lavora con le stringhe di testo

se stampate i cavi in ​​html con php o simili … fluttuate in testo e stampate in html

Usa lang attributo sull’input. Locale sulla mia app web fr_FR, lang = “en_EN” sul numero di input e posso usare indifferentemente una virgola o un punto. Firefox mostra sempre un punto, Chrome mostra una virgola. Ma entrambi i separtor sono validi.

usa il modello

  

in bocca al lupo