Creating a
Currency Masked TextBox with On-the-Fly Currency Formatting
By
default, a user can enter any character into a textbox. Masked textboxes help
reduce user input error by limiting what characters a user can type into a
textbox. Masked textboxes have been a standard user input element in desktop
applications for decades, but are less common in web applications for a variety
of reasons. However, it’s not terribly difficult to implement masked textboxes.
All that’s required is a touch of JavaScript and a sprinkle of jQuery.
In
a recent project the client wanted a masked textbox for the textboxes on the
page collecting currency information. Moreover, he wanted the user’s input to
automatically be displayed as a formatted currency value in the textbox after
entering their value.
Allowing
Only Currency-Related Characters in a TextBox
There
are a number of existing masked input plug-in for jQuery. After trying some out
I decided to roll my own JavaScript functions. I intend to come back to these
and turn them into jQuery plug-in, but for now they’re just JavaScript
functions. As you can see in the script below, I created four functions:
- numbersOnly – allows just number inputs, whether they are from the letters at the top of the keyboard or from the number pad.
- numbersAndCommasOnly – allows number inputs and commas.
- decimalsOnly – allows numbers, commas, and periods (either from the main keyboard or the number pad).
- currenciesOnly – allows numbers, commas, periods, and the dollar sign.
In
addition to the allowed characters discussed above, the functions also permit
“special character key codes,” namely Delete, Backspace, left arrow, right
arrow, Home, End and Tab. What keycodes are valid are listed in the variables
at the top of the script; see Javascript Char Codes for a table listing the keys and
their corresponding key codes.
Here
is the script of interest:
// JavaScript I wrote to
limit what types of input are allowed to be keyed into a textbox
var allowedSpecialCharKeyCodes
= [46,8,37,39,35,36,9];
var numberKeyCodes =
[44, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102,
103, 104, 105];
var commaKeyCode =
[188];
var decimalKeyCode =
[190,110];
function
numbersOnly(event) {
var
legalKeyCode =
(!event.shiftKey &&
!event.ctrlKey && !event.altKey)
&&
(jQuery.inArray(event.keyCode,
allowedSpecialCharKeyCodes) >= 0
||
jQuery.inArray(event.keyCode,
numberKeyCodes) >= 0);
if (legalKeyCode === false)
event.preventDefault();
}
function
numbersAndCommasOnly(event) {
var legalKeyCode =
(!event.shiftKey &&
!event.ctrlKey && !event.altKey)
&&
(jQuery.inArray(event.keyCode, allowedSpecialCharKeyCodes)
>= 0
||
jQuery.inArray(event.keyCode,
numberKeyCodes) >= 0
||
jQuery.inArray(event.keyCode,
commaKeyCode) >= 0);
if (legalKeyCode === false)
event.preventDefault();
}
function
decimalsOnly(event) {
var legalKeyCode =
(!event.shiftKey &&
!event.ctrlKey && !event.altKey)
&&
(jQuery.inArray(event.keyCode,
allowedSpecialCharKeyCodes) >= 0
||
jQuery.inArray(event.keyCode, numberKeyCodes)
>= 0
||
jQuery.inArray(event.keyCode,
commaKeyCode) >= 0
||
jQuery.inArray(event.keyCode,
decimalKeyCode) >= 0);
if (legalKeyCode === false)
event.preventDefault();
}
function currenciesOnly(event)
{
var legalKeyCode =
(!event.shiftKey &&
!event.ctrlKey && !event.altKey)
&&
(jQuery.inArray(event.keyCode,
allowedSpecialCharKeyCodes) >= 0
||
jQuery.inArray(event.keyCode,
numberKeyCodes) >= 0
||
jQuery.inArray(event.keyCode,
commaKeyCode) >= 0
||
jQuery.inArray(event.keyCode,
decimalKeyCode) >= 0);
// Allow for $
if (!legalKeyCode && event.shiftKey
&& event.keyCode == 52)
legalKeyCode = true;
if (legalKeyCode === false)
event.preventDefault();
}
My
script is, admittedly, very US-centric. I have not tested the key codes with a
non-English keyboard and for currencies I only allow a dollar sign. For the
project I wrote this script for this is (currently) a non-issue since it is
used within the corporate firewall and all sales are domestic, but clearly the
above script would not work as well for international settings.
Applying
the Currency Masking Script to a TextBox on the Page
With
the above script in place you can have a textbox on the page mask its input by
having the appropriate function called in response to the keydown event.
The following jQuery syntax wires up this logic to all single-line textboxes
that have the CSS class currenciesOnly.
That’s it!
$(document).ready(function () {
$("input[type=text].currenciesOnly").live('keydown', currenciesOnly);
});That’s it!
Formatting the Just-Entered CurrencyAnother requirement my client had was to format the just-entered number as a currency. That is, to change the user’s input – say, 45000 – to a formatted value like $45,000.00 immediately after their tabbed out of the textbox. To accomplish this I used Ben Dewey’s jQuery Format Currency Plugin, which you can see a demo of at http://www.bendewey.com/code/formatcurrency/demo/.
This plugin adds a formatCurrency function that you can call on a set of elements returned by a jQuery selector.
To use this plugin I updated the $(document).ready event handler shown above to also call the formatCurrency function on blur:
$(document).ready(function () {
$("input[type=text].currenciesOnly").live('keydown', currenciesOnly)
.live('blur',
function () {
$(this).formatCurrency();
}
);
});In short, whenever a textbox with a CSS class of currenciesOnly is blurred, the just-blurred textbox’s inputs are formatted as a currency thanks to the formatCurrency function.
About Author:
THANK YOU FOR THE INFORMATION
ReplyDeletePLEASE VISIT US
Seo Services Company in Bangalore
This comment has been removed by the author.
ReplyDelete