JSFiddle - React, Tailwind, and code Playground

by Stev Peifer

HTML

For this example, try typing numbers such as <i>23.4B</i>, <i>89M</i>, <i>12.345K</i>, or 123456.
<hr />
<br />


<b>HTML:</b>
<br />
<span>
    &lt;input id="i_have_a_callback"/&gt;
    <br />
    &lt;br /&gt;
    <br />
    &lt;span id="ill_be_replaced"&gt;&lt;/span&gt;
</span>
<br />
<b>JavaScript:</b>
<br />
<span>
 $('#i_have_a_callback').number({callback:function(event){$('#ill_be_replaced').html('The value entered was: '+event.value+'.');});
</span>
<br />
<input id="i_have_a_callback"/>
<br />
<span id="ill_be_replaced" style="font-size:100%;"></span>    
<br />
<br />
<br />



<b>HTML:</b>
<br />
<span>
    &lt;input class="level" value="50"/&gt;
    <br />
    &lt;br /&gt;
    <br />
    &lt;input class="level" value="75"/&gt;
</span>
<br />
<b>JavaScript:</b>
<br />
<span>
    $('.level').number();
</span>
<br />
<input class="level" value="50" />
<br />
<input class="level" value="75" />
<br />
<br />
<br />



<b>HTML:</b>
<br />
<span>
    &lt;input id="i_am_an_id"/&gt;
</span>
<br />
<b>JavaScript:</b>
<br />
<span>
    $('#i_am_an_id').number({hasMinimum:10,initialValue:25});
</span>
<br />
<input id="i_am_an_id" />
<br />
<br />
<br />



<b>HTML:</b>
<br />
<span>
    &lt;input id="girls_love_cake"/&gt;
</span>
<br />
<b>JavaScript:</b>
<br />
<span>
    $('#girls_love_cake').number({hasMaximum:99,hasMinimum:1});
</span>
<br />
<input id="girls_love_cake" />
<br />
<br />
<br />



<b>HTML:</b>
<br />
<span>
    &lt;input id="bacon"/&gt;
</span>
<br />
<b>JavaScript:</b>
<br />
<span>
    $('#bacon').number({isMultiple:24});
</span>
<br />
<input id="bacon" />
<br />
<br />
<br />



<b>HTML:</b>
<br />
<span>
    &lt;input class="class_time" value="1.20"/&gt;
    <br />
    &lt;br /&gt;
    <br />
    &lt;input class="class_time" value="1.0005"/&gt;
    <br />
    &lt;br /&gt;
    <br />
    &lt;input id="we_do_decimals"/&gt;
</span>
<br />
<b>JavaScript:</b>
<br />
<span>
   ...

CSS

span {
    font-size:75%;
}

JavaScript

/*
 * Number - Numerical Inputs Made Easy.
 * By Stev Peifer (http://www.tip.it)
*/
(
    function($){
        $.fn.number=function(option){
        //~ Check that the elements exist
            if(!this.length)
                $.error('$.number() - No elements found.');  
        //~ Create objects and default options
            var defaultOption={
                callback:false,
                hasMaximum:false,
                hasMinimum:false,
                initialValue:false,
                isDecimal:false,
                isMultiple:false
            },
            option=$.extend({},defaultOption,option,{isInitiated:false});
        //~ Check and throw errors for invalid options
            if((typeof option.callback=='boolean'&&option.callback!=false)||(typeof option.callback!='boolean'&&!$.isFunction(option.callback)))
                $.error('$.number() - Unexpected value specified for option: callback.\n\t• Expected: function.\n\t• Passed: '+typeof option.callback+'.');
            if((typeof option.hasMaximum=='boolean'&&option.hasMaximum!=false)||(typeof option.hasMaximum!='boolean'&&isNaN(parseFloat(option.hasMaximum))))
                $.error('$.number() - Unexpected value specified for option: hasMaximum.\n\t• Expected: number.\n\t• Passed: '+typeof option.hasMaximum+'.');
            if((typeof option.hasMinimum=='boolean'&&option.hasMinimum!=false)||(typeof option.hasMinimum!='boolean'&&isNaN(parseFloat(option.hasMinimum))))
                $.error('$.number() - Unexpected value specified for option: hasMinimum.\n\t• Expected: number.\n\t• Passed: '+typeof option.hasMinimum+'.');
            if((typeof option.initialValue=='boolean'&&option.initialValue!=false)||(typeof option.initialValue!='boolean'&&isNaN(parseFloat(option.initialValue))))
                $.error('$.number() - Unexpected value specified for option: initialValue.\n\t• Expected: number.\n\t• Passed: '+typeof option.initialValue+'.');
            if(typeof...