Here I'm going to introduce a powerful and complete JQuery plugin about numeric inputs.
This plugin is created by Robert J. Knothe. You can control its number and decimal parts separately, put live separator or disable it, positive negative control, rounding, ... .
First of all, take a look to some samples here:
Simple Numeric Input: number length:10
Thousand Grouping Number: thousand grouping ###,###; number length:10
Simple Decimal Input: thousand grouping ###,###; number length:10; decimal length:2, decimal point:'.'
Decimal Input with Sign: thousand grouping ###,###; number length:10; decimal length:2, decimal point:'.'; Negativable
Setup and configuration
First of all the page should include jquery and input js files then call autoNumeric function for the inputs you'd like to become numeric input. For example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script><script type="text/javascript" src="https://sites.google.com/site/prgassist/input.js?attredirects=0&d=1"></script>
$('#testNumber').autoNumeric(inputConfig); $(function() {
$('#testNumber').autoNumeric({aSep:',', aNeg:'', mDec:0, mRound:'S', mNum:10});
});
</script>
</head>
<body>
<form id="testForm" action="test.html">
<input id="testNumber"/>
</form>
</body>
</html>
| Property | Type | Description | Default |
|---|---|---|---|
| aNum | string | allowed numeric values | '0123456789' |
| aNeg | string | allowed negative sign / character | '' |
| aSep | string | allowed thousand separator character | '' |
| aDec | string | allowed decimal separator character | '.' |
| aSign | string | allowed currency symbol | '' |
| pSign | string | placement of currency sign prefix('p') or suffix('s') | 'p' |
| mNum | int | max number of numerical characters to the left of the decimal | 18 |
| mDec | int | max number of decimal places | 2 |
| dGroup | int | digital grouping for the thousand separator used in Format | 3 |
| mRound | string | method used for rounding:
| 'S' |
| aPad | boolean | true= always Pad decimals with zeros, false=does not pad with zeros. If the value is 1000, mDec=2 and aPad=true, the output will be 1000.00, if aPad=false the output will be 1000 (no decimals added) | true |
Format Default Value
There is a global format function in input.js to format the value for default usages called '$.fn.autoNumeric.Format'. For example you are appointed to set '23452345.148' to the input as a default in HTML render time, you should format you input value to this:'23,452,345.15'. You can use the method on this way(red line):
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/prgassist/input.js?attredirects=0&d=1"></script>
<script type="text/javascript">
$(function() {
var inputConfig = {aSep:',', aNeg:'-', mDec:2, mRound:'S', mNum:10};
$('#testNumber').val($.fn.autoNumeric.Format('testNumber', 23452345.148, inputConfig));
$('#testNumber').autoNumeric(inputConfig); });
</script>
</head>
<body>
<form id="testForm" action="test.html">
<input id="testNumber"/>
<input type="submit" name="test"/>
</form>
</body>
</html>
Clear Formatting
For most of frameworks you should bind an input value to the server side variables. The server side variables are mostly in int, long, decimal or other digital data types. So they don't support ',' separator value. I should clear formatting of input value. The only job is to replace ',' with '' in input value. Take a look to this example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/prgassist/input.js?attredirects=0&d=1"></script>
<script type="text/javascript">
$(function() {
var inputConfig = {aSep:',', aNeg:'-', mDec:2, mRound:'S', mNum:10};
$('#testNumber').val($.fn.autoNumeric.Format('testNumber', 23452345.148, inputConfig));
$('#testNumber').autoNumeric(inputConfig);
$('#testForm').submit(function() {
$('#testNumber').val(replaceAll($('#testNumber').val(), ",", ""));
alert($('#testNumber').val());
});
});
function replaceAll(val, searchValue, replaceValue) {
var ret = val;
while (ret.indexOf(searchValue) > -1) {
ret = ret.replace(searchValue, replaceValue);
}
return ret;
}
</script>
</head>
<body>
<form id="testForm" action="test.html">
<input id="testNumber"/>
<input type="submit" name="test"/>
</form>
</body>
</html>
I clear ',' separator in input value on before HTML form posting time(red lines). replaceAll method is a simple javascript method function that replace all of matching searchValue charaters with replaceValue charaters(blue lines)
Now it's your turn to try this. As I said, you can download the needed scripts from here:
http://code.jquery.com/jquery-1.5.1.min.js
https://sites.google.com/site/prgassist/input.js?attredirects=0&d=1
You can simply create numeric input custom tag with related specifications in any frameworks you work with.
Enjoy yourselves
all rights reserved by Mostafa Rastgar and Programmer Assistant weblog
1 comment:
Hi,
How do we not make display of unnecessary decimal digits when we focus out of the control?
In you example of "Simple Decimal Input:", when we enter "1" and click outside the textbox, it automatically formats to display "1.00". I want this to be displayed as "1" unless there is a valid decimal place. Is there any option to auto format this?
Thanks
Post a Comment