JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://tjvantoll.com/images/posts/2012-07-15/dependencies.js"></script>
<link rel="stylesheet" href="http://tjvantoll.com/images/posts/2012-07-15/dependencies.css">
<h3>Currency - USD</h3>
I work but don't bring up the number keyboard on mobile devices<br />
<input type="text" min="0.01" max="2500" value="25" /><br />
<br />
I don't work but bring up the right keyboard<br />
<input type="number" min="0.01" max="2500" value="25" />

CSS

body { padding: 5px; }
h3:first-child { margin-top: 0; }
h3 { margin-top: 10px; margin-bottom: 2px; }

JavaScript

$('input').change(function() {
    var min = Globalize.parseFloat($(this).attr("min"));
    var max = Globalize.parseFloat($(this).attr("max"));
    var value = Globalize.parseFloat($(this).val());
    if(value < min)
        value = min;
    if(value > max)
        value = max;
    value = Globalize.format(value,"c");
    console.log(value);
    $(this).val(value);
});