input-number-localization.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Number type input shows and accepts localized numbers</title>
  5. <style>
  6. :invalid {
  7. border-color: red;
  8. -webkit-box-shadow: 4px 4px 8px #ff8888;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <div id="console"></div>
  14. <p>Output test 1: The following text field should have a localized representation for "-1234.5678".
  15. e.g. "-1234.5678" for en_US locale, "-1234,5678" for fr_FR locale. The thousand separator is
  16. currently off.</p>
  17. <div><input type=number value="-1234.5678" step=any></div>
  18. <p>Output test 2: The following text field should have "-1234.5678E+12" in any locale.
  19. </p>
  20. <div><input type=number value="-1234.5678E+12" step=any></div>
  21. <p>Input test 1: Type a localized representation of a number (e.g. -1,234.5678 for en_US locale,
  22. -1.234,5678 for fr_FR locale) into the following text field.
  23. You'll see an equivalent number in the standard format on the bottom of the text field.</p>
  24. <p>Input test 2: Type a number in the scientific notation (e.g. 0.1234e-10.)
  25. You'll see the same number string on the bottom of the text field.</p>
  26. <div><input type=number id=target step=any oninput="handleInput()"></div>
  27. <div>Standard format: <output id=output></output></div>
  28. <script>
  29. function handleInput() {
  30. document.getElementById('output').value = document.getElementById('target').value;
  31. }
  32. </script>
  33. </body>
  34. </html>