我正在尝试建立一个捐赠页面,供人们向非营利组织捐款,并允许他们指定资金的用途。我已将其设置为在捐赠者输入金额时将其汇总在每个字段中的金额。我试图在每个字段中添加一个输入掩码,但这只是让我的 JavaScript 崩溃而没有做任何事情。这是我目前拥有的代码,可以在任何掩码之前完美运行:
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var calcTot = function() {
var sum = 0;
$('.toTotal').each( function(){
sum += Number( $(this).val() );
});
$('#giveTotal').val( '$' + sum.toFixed(2) );
}
calcTot();
$('.toTotal').change( function(){
calcTot();
});
});
</script>
'toTotal' 是给所有需要相加的输入框的类名;那也是需要掩码的类。'giveTotal' 是总字段的 id。
我尝试了在 StackOverflow 和其他网站上找到的几种变体。
完整代码:
<html>
<head>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
//This is one of the masking codes I attempted.
$('.toTotal').mask('9.99', {reverse: true});
//other options I have tried:
//$('.toTotal').mask('9.99');
//$('.toTotal').mask('0.00');
//$('.toTotal').inputmask('9.99');
//$('.toTotal').inputmask('mask', {'mask': '9.99'});
var calcTot = function() {
var sum = 0;
$('.toTotal').each( function(){
sum += Number( $(this).val() );
});
$('#giveTotal').val( '$' + sum.toFixed(2) );
}
calcTot();
$('.toTotal').change( function(){
calcTot();
});
//I have tried putting it here, too
});
</script>
<title>Addition</title>
</head>
<body>
<input type="text" class="toTotal"><br />
<input type="text" class="toTotal"><br />
<input type="text" class="toTotal"><br />
<input type="text" id="giveTotal">
</body>
</html>