Set value to currency in

Question

I am trying to format a number input by the user into currency using javascript. This works fine on <input type="text" />. However, on <input type="number" /> 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 <input type="number" /> so mobile devices know to bring up a keyboard for number input.

Can't you just display the $ in front of the control? Or do you want to give the users control over which currency they want to enter? In the latter case, I'm afraid only `type="text"` qualifies. — Mr Lister, Feb 01 '13 at 16:41
@MrLister that is a really good point. That is probably what I'll end up doing. — Danny, Feb 01 '13 at 16:49
If you want to allow the user to change the type of currency but still do `type="number"`, you can have a select box with the various currency symbols. Note that many countries put the currency symbol after the number instead of before. — RoboticRenaissance, Nov 04 '16 at 19:58
Linked - [html5 input for money/currency](https://stackoverflow.com/q/24163889/104380) — vsync, Apr 15 '20 at 08:57

Andrea Ligios · Answer 1 · 2017-06-13T12:35:41.650

79

Add step="0.01" to the <input type="number" /> parameters:

<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />

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.

edited Jun 13 '17 at 12:35

answered Feb 01 '13 at 16:44

Andrea Ligios

46,329
24
102
208

7

Not what the OP asked for... if value="25.6" that's what will show... it should show "25.60" – patrick Jun 13 '17 at 00:46
1

[HTML5 specs/implementations of this are buggy](https://bugzilla.mozilla.org/show_bug.cgi?id=1003896) @patrick. What you want is not possible apart from [hackish, browsers-dependant solutions](https://stackoverflow.com/a/19205426/1654265), which will not work on Firefox, though. I've edited the fiddle BTW, since the `Globalize.format` function was now breaking it *at all* in FF, so I guess I should thank you for your feedback :) – Andrea Ligios Jun 13 '17 at 12:35
1

@AndreaLigios The link that you have described as classic textbox is exactly what I was looking for in formatting currency for the textbox. I had to make several changes, but it was a great start. – Jester Jan 23 '18 at 20:03
1

`min` has no sense here. I can easily set negative values – Green Feb 09 '18 at 12:21
1

@Green I'm on Firefox, and I cannot. That, however, is browser implementation specific, and in the end, I'm confident you understand [the difference between client-side and server-side validation](https://stackoverflow.com/a/28341208/1654265). I'm not sure what the downvote is really about, but thanks for the feedback. – Andrea Ligios Feb 09 '18 at 13:25

Danny · Accepted Answer · 2017-12-22T17:04:15.480

In the end I made a jQuery plugin that will format the <input type="number" /> 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:

(function($) {
  $.fn.currencyInput = function() {
    this.each(function() {
      var wrapper = $("<div class='currency-input' />");
      $(this).wrap(wrapper);
      $(this).before("<span class='currency-symbol'>$</span>");
      $(this).change(function() {
        var min = parseFloat($(this).attr("min"));
        var max = parseFloat($(this).attr("max"));
        var value = this.valueAsNumber;
        if(value < min)
          value = min;
        else if(value > max)
          value = max;
        $(this).val(value.toFixed(2)); 
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('input.currency').currencyInput();
});

.currency {
  padding-left:12px;
}

.currency-symbol {
  position:absolute;
  padding: 2px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="currency" min="0.01" max="2500.00" value="25.00" />

score 9 · Answer 3 · answered Oct 29 '13 at 23:06

9

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:

<span>$</span><input type="number" min="0.01" step="0.01" max="2500" value="25.67">

Then add a bit of styling magic:

span{
  position:relative;
  margin-right:-20px
}
input[type='number']{
  padding-left:20px;
  text-align:left;
}

answered Oct 29 '13 at 23:06

William Hagan

195
1
9

This is nice and clean. the only problem is that clicking the currency symbol does not focus the input. – Mark W Jun 12 '15 at 16:56
That's a simple javascript problem. Click event on span to focus the input – frugalcoder Jun 14 '16 at 05:50
9

…or you could just use a `` tag, which would be semantically valuable as well (and you wouldn't need JS). – nils Jun 29 '16 at 16:58

score 4 · Answer 4 · answered Feb 01 '13 at 16:50

4

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.

answered Feb 01 '13 at 16:50

Christophe

24,147
23
84
130

This is a _much_ better choice than letting the users type the currency. – Mr Lister Feb 01 '13 at 16:56
Sorry, but the jQuery example given here and CurrencyTextBox in Dojo give much more user-friendly methods of managing input and validation than two fields. Except on mobile, because you have to use a text keyboard. The ultimate irony is on my iPad, type="number" includes my locale's currency symbol, £. HTML really needs to catch up and provide something that switches to appropriate keyboard for currency. – Paul Stephen Withers Jun 25 '14 at 15:49

score -1 · Answer 5 · edited May 23 '17 at 12:10

-1

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

edited May 23 '17 at 12:10

Community

1
1

answered Feb 01 '13 at 16:46

mojoaxel

1,008
1
9
16

Set value to currency in

5 Answers5

Linked

Related