Set value to currency in input type number

Question

I am trying to format a number input by the user into currency using javascript  This works fine on  lt input type  text    gt   However  on  lt input type  number    gt  I cannot seem to be able to set the value to anything that contains non-numeric values  The following fiddle shows my problem  http   jsfiddle net 2wEe6 72   Is there anyway for me to set the value to something like  125 00    I want to use  lt input type  number    gt  so mobile devices know to bring up a keyboard for number input

User · Answer

It seems that you ll need two fields  a choice list for the currency and a number field for the value   A common technique in such case is to use a div or span for the display  form fields offscreen   and on click switch to the form elements for editing

User · Answer

Add step  0 01  to the  lt input type  number    gt  parameters    lt input type  number  min  0 01  step  0 01  max  2500  value  25 67    gt    Demo  http   jsfiddle net uzbjve2u   But the Dollar sign must stay outside the textbox    every non-numeric or separator charachter will be cropped automatically   Otherwise you could use a classic textbox  like described here

User · Answer

The browser only allows numerical inputs when the type is set to  number   Details here   You can use the type  text  and filter out any other than numerical input using JavaScript like descripted here

User · Answer

You guys are completely right numbers can only go in the numeric field   I use the exact same thing as already listed with a bit of css styling on a span tag    lt span gt   lt  span gt  lt input type  number  min  0 01  step  0 01  max  2500  value  25 67  gt    Then add a bit of styling magic   span    position relative    margin-right -20px   input type  number      padding-left 20px    text-align left

User · Answer

In the end I made a jQuery plugin that will format the  lt input type  number    gt  appropriately for me  I also noticed on some mobile devices the min and max attributes don t actually prevent you from entering lower or higher numbers than specified  so the plugin will account for that too  Below is the code and an example    x000D   x000D   function      x000D      fn currencyInput   function     x000D      this each function     x000D        var wrapper       lt div class  currency-input    gt     x000D          this  wrap wrapper   x000D          this  before   lt span class  currency-symbol  gt   lt  span gt     x000D          this  change function     x000D          var min   parseFloat   this  attr  min     x000D          var max   parseFloat   this  attr  max     x000D          var value   this valueAsNumber  x000D          if value  lt  min  x000D            value   min  x000D          else if value  gt  max  x000D            value   max  x000D            this  val value toFixed 2     x000D            x000D          x000D       x000D     jQuery   x000D   x000D    document  ready function     x000D       input currency   currencyInput    x000D      x000D   currency   x000D    padding-left 12px  x000D    x000D   x000D   currency-symbol   x000D    position absolute  x000D    padding  2px 5px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt input type  number  class  currency  min  0 01  max  2500 00  value  25 00    gt  x000D   x000D   x000D

[javascript] Set value to currency in <input type="number" />

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to currency-formatting