NumBox jQuery Plugin
Mobile-Friendly HTML5 Numeric Input
| Input filtering and formatting of HTML5 type="number" inputs. |
| Helps ensure numeric keyboard appears on mobiles for entry. |
| Assists in ensuring input box stays in viewport during entry. |
| Does not rely on spinners, which can optionally be hidden. |
| Mobile-first design also works on desktops, including IE6+. |
| Extremely light weight at 2.68KB of code gzipped. |
| Provides both formatted value and numeric value. |
| Provides optional event hooks for your own code. |
| As-you-type real-time validation doesn’t rely on browser. |
| Custom formatting of displayed numbers. |
| Localizable: currency symbol, location, etc. |
| Fully compatible with PhoneGap and Apache Cordova. |
| Fully compatible with jQuery Mobile & other frameworks. |
| Requires either jQuery 1.7+ or Zepto.js v1.0+. |
| Free license for both commercial and non-commercial use. |
Why Another jQuery Input Filter?
NumBox aims 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.
In 2012 I started work on a hybrid mobile app, Timesheet Recorder, and discovered that, in order for the numeric keyboard to appear on my Android phones and tablets when I tapped on an input box, I needed to change the input from type="text" to type="number". Initially I didn’t think this was a big deal, until I found out that none of my preferred jQuery validation plug-ins worked with the HTML5 type="number" input element. Some, such as the otherwise excellent autoNumeric plug-in, wouldn't work at all, and others kept switching away from the numeric keyboard to the alphabetical keyboard every time a key was pressed. I initially created the NumBox jQuery Plugin for my own use to address this problem, and have since improved it and made it available to everyone, in case others may find it useful too.
NumBox aims 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.
I don't intent to ask for donations to help keep this site up or to maintain NumBox. If you find NumBox useful, please consider a link back to this page from your web site, LinkedIn or Google+. This will help spread the word to other web developers and mobile developers who may also be looking for a solution to the exact same <input type="number" /> problem that I encountered. I'd also love to hear from you, as it is encouraging to hear about something you've created helping other folks.
Thank you!
Neil Cresswell, NumBox jQuery Plugin’s developer.
A Quick Taste Test:
<div>
<label for="inputUSD" >US Dollars:</label>
<input id="inputUSD" type="number" value="1234" placeholder="Please enter a US dollar amount" />
</div>
<div>
<label for="inputJPY" >Japanese Yen:</label>
<input id="inputJPY" type="number" value="1234" placeholder="Please enter a Japanese yen amount" />
</div>
<div>
<label for="inputCNY" >Chinese Yuan:</label>
<input id="inputCNY" type="number" value="1234" placeholder="Please enter a Chinese yuan amount" />
</div>
<div>
<label for="chlorine" >Atomic Radius:</label>
<input id="chlorine" type="number" value="0.099" placeholder="Please enter an atomic weight" />
</div>
<div>
<label for="inputPct" >Percentage:</label>
<input id="inputPct" type="number" value="12" placeholder="Please enter a percentage" />
</div>
<div>
<label for="inputSSN" >Social Security #:</label>
<input id="inputSSN" type="number" value="023456789" placeholder="Please enter a US social security #" />
</div>
<div>
<label for="credcard" >VISA / MasterCard:</label>
<input id="credcard" type="number" value="4111111111111111" placeholder="Please enter a 16 digit card number" />
</div>
<div>
<label for="amexcard" >American Express:</label>
<input id="amexcard" type="number" value="378282246310005" placeholder="Please enter a 15 digit card number" />
</div>
<div>
<label for="inputZIP" >US ZIP Code:</label>
<input id="inputZIP" type="number" value="98110" placeholder="Please enter a 5 digit US ZIP code" />
</div>
<script type="text/javascript">
$(document).ready(function()
{
$('#inputUSD').NumBox(); // default: $0.00 to $999,999.99
$('#inputJPY').NumBox({ symbol: '¥', places: 0 }); // number of decimal places: 0
$('#inputCNY').NumBox({ symbol: '元', location: 'r' }); // symbol location: [l]eft or [r]ight
$('#chlorine').NumBox({ symbol: ' nanometers', places: 3, location: 'r' });
$('#inputPct').NumBox({ type: 'percent' }); // convenient preset for 0% to 100%
$('#inputSSN').NumBox({ type: 'ssn' }); // convenient preset for US SSNs
$('#credcard').NumBox({ type: 'ccard-16' }); // convenient preset for credit cards
$('#amexcard').NumBox({ type: 'ccard-15' }); // convenient preset for credit cards
$('#inputZIP').NumBox({ type: 'zip' }); // use 'zip9' instead for a nine digit zip code
$('.NumBox' ).NumBox('autoScroll', false); // can use NumBox class to alter all NumBox fields
});
</script>