http://scottonwriting.net/sowblog/archive/2011/06/25/creating-a-currency-masked-textbox-with-on-the-fly-currency-formatting.aspx
中,描述了使用jquery及插件,打早一个输入框,这个输入框中,只允许输入数字,可以使用
前后移动的光标,并且输入数字后,可以在数字前自动加上$符号,并且使用会计上的自动划分方法,对货币进行每三位的划分,下面讲解下过程:
1)编写js,判断只允许哪些输入,比如如下代码:
-
- 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);
-
-
- if (!legalKeyCode && event.shiftKey && event.keyCode == 52)
- legalKeyCode = true;
-
- if (legalKeyCode === false)
- event.preventDefault();
- }
// 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();
}
可以看到,上面的代码中,对只输入数字,能输入数字和逗号,能输入数字和其他符号(货币)的,作了限制了.
2 在文本框中应用如下jquery:
$(document).ready(function () {
$("input[type=text].currenciesOnly").live('keydown', currenciesOnly);
});
这里currenciesOnly是个样式,这里调用了上面的方法currenciesOnly
3) 再调用一个老外写的货币分3位符号插件,地址在:
http://code.google.com/p/jquery-formatcurrency/
再修改下:
$(document).ready(function () {
$("input[type=text].currenciesOnly").live('keydown', currenciesOnly)
.live('blur',
function () {
$(this).formatCurrency();
}
);
});
最后一个运行效果在:
http://jsfiddle.net/CBDea/1/ 可以看到