NumBox pluginaims to work equally well on desktops and mobile devices, and helps ensure that a numeric keyboard will pop-up on mobile devices when a number is entered.
It offers both real-time validation as you type plus display formatting, and has a lot of customization options.
For example, you could set up NumBox to handle a custom currency with your choice of decimal places, minimum and maximum values, currency symbol and if the symbol goes before or after the value.
When displayed, (not focused for input,) the number is correctly formatted with the appropriate symbol and commas every three digits, etc. During input, as you press each key, before it is displayed, the key press is validated, so you can’t enter non-numeric characters, numbers that are greater or smaller than the allowed range, or a number with an inappropriate number of decimal places, etc.
Download: http://www.numbox.org/download/
Demonstration: http://www.numbox.org/mobile-demo/
Plugin homepage: http://www.numbox.org/
Implementation:
1. First, include CSS and jQuery files
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="incjquery.numbox-1.1.0.css" type="text/css" />
<script src="jquery.min.js"></script>
<script src="jquery.numbox-1-1-0-min.js"></script>2. Build your HTML code
<!-- Place somewhere in the <body> of your page -->
<input id="myInput" type="number" value="" placeholder="Please enter a dollar amount" />3. Numbox plugin call
<script type="text/javascript">
$(document).ready(function()
{
// Simple Numbox call, without options
$('#myInput').NumBox();
// Numbox call, with options
$('#myInput').NumBox({
symbol: '£',
location: 'r'
});
});
</script>Options:
Screenshots:
