3

I have this input type number:

<input type="number">

Of course the value is a number, how to force it to display a number with a comma? And make it compatible with most HTML 5 browsers?

I searched but I didn't find a solution. I outputted a number but it is not showing with a comma.

Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
Emerson Maningo
  • 2,189
  • 9
  • 32
  • 47
  • Unrelated: you shouldn't self-terminate any HTML 5 with `/>`. That's only for XHML: [Do I need a "/" at the end of an or
    tag, etc.?](http://stackoverflow.com/a/15149657)     – Danny Beckett Jun 27 '13 at 11:01
  • 1
    http://www.w3.org/TR/html5/forms.html#number-state-%28type=number%29: _"Note: This specification does not define what user interface user agents are to use; user agent vendors are encouraged to consider what would best serve their users' needs. For example, a user agent in Persian or Arabic markets might support Persian and Arabic numeric input (converting it to the format required for submission as described above)."_ – CBroe Jun 27 '13 at 11:04
  • Thanks Danny, the closing tag is not important. But I need to display the number with a comma. This is the requirement. I don't want to use fancy JS. I just thought that this is possible with HTML 5. – Emerson Maningo Jun 27 '13 at 11:05
  • @CBroe you have a point.In my application,I'm required to display this in a comma. – Emerson Maningo Jun 27 '13 at 11:10
  • Well then I'd suggest to use some JavaScript to _emulate_ the type=number behavior on a normal _text_ input field. – CBroe Jun 27 '13 at 11:12
  • Yes thanks, the situation is rather complicated, I need to show the comma but since this is a form. I need to remove this as the form is submitted or else the URL contains query string with comma values. Writing another script to remove this one is a pain taking account that I need to do this after the form is posted. I'm thinking if there is an option in HTML 5 that would display the numbers as comma automatically. Then of course when its posted, it is a number not a string with commas. – Emerson Maningo Jun 27 '13 at 11:18
  • @CodexMeridian Can you check if my answer is correct? – Ortomala Lokni Mar 23 '15 at 12:20

1 Answers1

1

You can use the french locale lang="fr" that use a comma for the decimal separator.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Input test</title>
    <script>
      function init(){
        document.getElementById('in1').value = 3.14;
      }
    </script>
  </head>
  <body onload="init()">
    <input id="in1" lang="fr" type="number">
  </body>
</html>

It works well with Firefox 39.0:

enter image description here

but unfortunately it's not yet implemented in Chrome 44.

Ortomala Lokni
  • 56,620
  • 24
  • 188
  • 240