Customize Input Type Number – Jquery Plugin

File Size:2.13 KB
Views Total:368
Last Update:December 22, 2017
Publish Date:December 2, 2017
Official Website:Go to website
License:MIT

This is a jQuery number.js which allows developers to easily format numbers for display use.easily format numbers for display use. this plugin converts the normal input [type=”number”] into a simple input spinner where the users are able to use the plus/minus buttons to increment/decrement the number values.

How to use it:

1. Use CSS/js Path.

<link rel="stylesheet" href="number.css">
<script src="number.js"></script>

2. Use Html Code.

<p>value="5" step="1" min="0" max="10"</p>
<input type="number" value="5" step="1" min="0" max="10">
<p>value="0" step="1" min="0" max="10"</p>
<input type="number" value="0" step="1" min="0" max="10">
<p>value="10" step="1" min="0" max="10"</p>
<input type="number" value="10" step="1" min="0" max="10">
<p>value="1"</p>
<input type="number" value="1">

3. Use plugin script.

$('input').each(function () {

  $(this).number();

});

4. Custom Plugin Configure.

$('input').number({
  'containerClass' : 'number-style',
  'minus' : 'number-minus',
  'plus' : 'number-plus',
  'containerTag' : 'div',
  'btnTag' : 'span'
});

Done 🙂

Change Log