How to handle floats and decimal separators with html5 input type number

Question

Im building web app which is mainly for mobile browsers  Im using input fields with number type  so  most  mobile browsers invokes only number keyboard for better user experience  This web app is mainly used in regions where decimal separator is comma  not dot  so I need to handle both decimal separators   How to cover this whole mess with dot and comma   My findings   Desktop Chrome   Input type number User enters  4 55  to input field      my input   val    returns  455  I can not get the correct value from input   Desktop Firefox   Input type number User enters  4 55  to input field      my input   val    returns  4 55  Thats fine  I can replace comma with dot and get correct float   Android browser   Input type number User enters  4 55  to input field  When input loses focus  value is truncated to  4  Confusing to user   Windows Phone 8   Input type number User enters  4 55  to input field      my input   val    returns  4 55  Thats fine  I can replace comma with dot and get correct float   What are the  best practices  in this kind of situations when user might use comma or dot as decimal separator and I want to keep html input type as number  to provide better user experience   Can I convert comma to dot  on the fly   binding key events  is it working with number inputs   EDIT  Currenlty I do not have any solution  how to get float value  as string or number  from input which type is set to number  If enduser enters  4 55   Chrome returns always  455   Firefox returns  4 55  which is fine   Also it is quite annoying that in Android  tested 4 2 emulator   when I enter  4 55  to input field and change focus to somewhere else  the entered number get truncated to  4

User · Answer

Sounds like you d like to use toLocaleString   on your numeric inputs   See https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Number toLocaleString for its usage   Localization of numbers in JS is also covered in Internationalization Number formatting  quot num toLocaleString   quot   not working for chrome

User · Answer

According to w3 org the value attribute of the number input is defined as a floating-point number  The syntax of the floating-point number seems to only accept dots as decimal separators   I ve listed a few options below that might be helpful to you   1  Using the pattern attribute  With the pattern attribute you can specify the allowed format with a regular expression in a HTML5 compatible way  Here you could specify that the comma character is allowed and a helpful feedback message if the pattern fails     lt input type  number  pattern   0-9         0-9      name  my-num             title  The number input must start with a number and use either comma or a dot as a decimal character    gt    Note  Cross-browser support varies a lot  It may be complete  partial or non-existant     2  JavaScript validation  You could try to bind a simple callback to for example the onchange  and or blur  event that would either replace the comma or validate all together    3  Disable browser validation     Thirdly you could try to use the formnovalidate attribute on the number inputs with the intention of disabling browser validation for that field all together     lt input type  number  formnovalidate   gt    4  Combination      lt input type  number  pattern   0-9         0-9                  name  my-num  formnovalidate            title  The number input must start with a number and use either comma or a dot as a decimal character    gt

User · Answer

When you call     my input   val    it returns as string variable  So use parseFloat and parseIntfor converting  When you use parseFloat your desktop or phone ITSELF understands the meaning of variable   And plus you can convert a float to string by using toFixed which has an argument the count of digits as below   var i   0 011  var ss   i toFixed 2     It returns 0 01

User · Answer

Use valueAsNumber instead of  val            input   valueAsNumber     value        Returns a number representing the form control s value  if applicable  otherwise  returns null    Can be set  to change the value    Throws an INVALID STATE ERR exception if the control is neither date- or time-based nor numeric

User · Answer

I think what s missing in the answers above is the need to specify a different value for the step attribute  which has a default value of 1  If you want the input s validation algorithm to allow floating-point values  specify a step accordingly   For example  I wanted dollar amounts  so I specified a step like this     lt input type  number  name  price             pattern   0-9         0-9      step  0 01              title  This should be a number with up to 2 decimal places   gt    There s nothing wrong with using jQuery to retrieve the value  but you will find it useful to use the DOM API directly to get the elements s validity valid property   I had a similar issue with the decimal point  but the reason I realized there was an issue was because of the styling that Twitter Bootstrap adds to a number input with an invalid value   Here s a fiddle demonstrating that the adding of the step attribute makes it work  and also testing whether the current value is valid     jsFiddle   TL DR  Set the a step attribute to a floating-point value  because it defaults to 1   NOTE  The comma doesn t validate for me  but I suspect that if I set my OS language region settings to somewhere that uses a comma as the decimal separator  it would work   note in note   that was not the case for OS language keyboard settings  German  in Ubuntu Gnome 14 04

User · Answer

I have not found a perfect solution but the best I could do was to use type  tel  and disable html5 validation  formnovalidate     lt input name  txtTest  type  tel  value  1 200 00  formnovalidate  formnovalidate    gt    If the user puts in a comma it will output with the comma in every modern browser i tried  latest FF  IE  edge  opera  chrome  safari desktop  android chrome    The main problem is    Mobile users will see their phone keyboard which may be different than the number keyboard  Even worse the phone keyboard may not even have a key for a comma    For my use case I only had to    Display the initial value with a comma  firefox strips it out for type number  Not fail html5 validation  if there is a comma  Have the field read exactly as input  with a possible comma    If you have a similar requirement this should work for you   Note  I did not like the support of the pattern attribute  The formnovalidate seems to work much better

User · Answer

My recommendation  Don t use jQuery at all  I had the same problem as you  I found that     my input   val   always return some weird result    Try to use document getElementById  my input   valueAsNumber instead of     my input   val    and then  use Number your value retrieved  to try to create a Number  If the value is NaN  you know certainly that that s not a number   One thing to add is when you write a number on the input  the input will actually accept almost any character  I can write the euro sign  a dollar  and all of other special characters   so it is best to retrieve the value using  valueAsNumber instead of using jQuery   Oh  and BTW  that allows your users to add internationalization  i e   support commas instead of dots to create decimal numbers   Just let the Number   object to create something for you and it will be decimal-safe  so to speak

User · Answer

uses a text type but forces the appearance of the numeric keyboard   lt input value  12 4  type  text  inputmode  numeric  pattern   -    0-9        0-9    gt    the inputmode tag is the solution

User · Answer

Whether to use comma or period for the decimal separator is entirely up to the browser  The browser makes it decision based on the locale of the operating system or browser  or some browsers take hints from the website  I made a browser comparison chart showing how different browsers support handle different localization methods  Safari being the only browser that handle commas and periods interchangeably   Basically  you as a web author cannot really control this  Some work-arounds involves using two input fields with integers  This allows every user to input the data as yo expect  Its not particular sexy  but it will work in every case for all users

User · Answer

Appearently Browsers still have troubles  although Chrome and Firefox Nightly do fine   I have a hacky approach for the people that really have to use a number field  maybe because of the little arrows that text fields dont have    My Solution  I added a keyup event Handler to the form input and tracked the state and set the value once it comes valid again   Pure JS Snippet  JSFIDDLE   x000D   x000D  var currentString       x000D  var badState   false  x000D  var lastCharacter   null  x000D   x000D  document getElementById  field   addEventListener  keyup    event    gt    x000D    if   event target value  amp  amp    event target validity badInput    x000D            currentString    event target value  x000D      else if   event target validity badInput    x000D      if  badState  amp  amp  lastCharacter  amp  amp  lastCharacter match           amp  amp   isNaN   event key     x000D         event target value      currentString       event key   10    x000D        badState   false  x000D        else   x000D        badState   true  x000D        x000D      x000D    document getElementById  number   textContent    event target value  x000D    lastCharacter    event key  x000D      x000D   x000D  document getElementById  field   addEventListener  blur    event    gt    x000D   if  badState    x000D       event target value     currentString   x000D      badState   false  x000D    document getElementById  number   textContent    event target value  x000D      x000D      x000D   result  x000D    padding  10px  x000D    background-color  orange  x000D    font-size  25px  x000D    width  400px  x000D    margin-top  10px  x000D    display  inline-block  x000D    x000D   x000D   field  x000D    padding  5px  x000D    border-radius  5px  x000D    border  1px solid grey  x000D    width  400px  x000D    x000D   lt input type  number  id  field  keyup  keyUpFunction  step  0 01  placeholder  Field for both comma separators  gt  x000D   x000D   lt span id  result   gt  x000D    lt span  gt Current value   lt  span gt  x000D    lt span id  number  gt  lt  span gt  x000D   lt  span gt  x000D   x000D   x000D    Angular 9 Snippet   x000D   x000D   Directive   x000D    selector    appFloatHelper   x000D     x000D  export class FloatHelperDirective   x000D    private currentString       x000D    private badState   false  x000D    private lastCharacter  string   null  x000D   x000D     HostListener  blur      event    onBlur event    x000D      if  this badState    x000D        this model update emit   this currentString    x000D        this badState   false  x000D        x000D      x000D   x000D    constructor private renderer  Renderer2  private el  ElementRef  private change  ChangeDetectorRef  private zone  NgZone  private model  NgModel    x000D      this renderer listen this el nativeElement   keyup    e  KeyboardEvent    gt    x000D        if  el nativeElement value  amp  amp   el nativeElement validity badInput    x000D          this currentString   el nativeElement value  x000D          else if  el nativeElement validity badInput    x000D          if  this badState  amp  amp  this lastCharacter  amp  amp  this lastCharacter match           amp  amp   isNaN  e key     x000D            model update emit   this currentString      e key   10    x000D            el nativeElement value     this currentString      e key   10   x000D            this badState   false  x000D            else   x000D            this badState   true  x000D            x000D                 x000D        this lastCharacter   e key  x000D          x000D      x000D     x000D    x000D   lt input type  number  matInput placeholder  Field for both comma separators  appFloatHelper   ngModel    numberModel  gt  x000D   x000D   x000D

[javascript] How to handle floats and decimal separators with html5 input type number

Examples related to javascript

Examples related to jquery

Examples related to mobile

Examples related to floating-point

Examples related to html-input