Skip to content

Commit

Permalink
Updated demo with FormatCurrencyLive API
Browse files Browse the repository at this point in the history
  • Loading branch information
@fernandofig
fernandofig committed Jun 17, 2013
1 parent 57dd35e commit bdb8525
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 70 deletions.
104 changes: 35 additions & 69 deletions demo/format_as_you_type.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,106 +23,69 @@
.log h3 { background:#966; }
#clearLog { float:right; }
</style>
<script type="text/javascript" src="../external/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../external/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery.formatCurrency.js"></script>
<script type="text/javascript">
$(function() {
// jQuery formatCurrency plugin: http://plugins.jquery.com/project/formatCurrency

// Format while typing & warn on decimals entered, 2 decimal places
$('#formatWhileTypingAndWarnOnDecimalsEntered2').blur(function() {
$('#formatWhileTypingAndWarnOnDecimalsEnteredNotification2').html(null);
$(this).formatCurrency({ colorize: true, negativeFormat: '-%s%n', roundToDecimalPlace: 2 });
})
.keyup(function(e) {
var e = window.event || e;
var keyUnicode = e.charCode || e.keyCode;
if (e !== undefined) {
switch (keyUnicode) {
case 16: break; // Shift
case 17: break; // Ctrl
case 18: break; // Alt
case 27: this.value = ''; break; // Esc: clear entry
case 35: break; // End
case 36: break; // Home
case 37: break; // cursor left
case 38: break; // cursor up
case 39: break; // cursor right
case 40: break; // cursor down
case 78: break; // N (Opera 9.63+ maps the "." from the number key section to the "N" key too!) (See: http://unixpapa.com/js/key.html search for ". Del")
case 110: break; // . number block (Opera 9.63+ maps the "." from the number block to the "N" key (78) !!!)
case 190: break; // .
default: $(this).formatCurrency({ colorize: true, negativeFormat: '-%s%n', roundToDecimalPlace: -1, eventOnDecimalsEntered: true });
}
}
})
.bind('decimalsEntered', function(e, cents) {
$('#formatWhileTypingAndWarnOnDecimalsEntered2').formatCurrencyLive({
colorize: true,
negativeFormat: '-%s%n',
roundToDecimalPlace: 2,
eventOnDecimalsEntered: true
}).bind('decimalsEntered', function(e, cents) {
if (String(cents).length > 2) {
var errorMsg = 'Please do not enter any cents (0.' + cents + ')';
var errorMsg = 'Don\'t enter more than 2 dec. places (' + cents + ')';
$('#formatWhileTypingAndWarnOnDecimalsEnteredNotification2').html(errorMsg);
log('Event on decimals entered: ' + errorMsg);
}
});


// Warn on decimals entered, 2 decimal places
$('#warnOnDecimalsEntered2').blur(function() {
$('#warnOnDecimalsEnteredNotification2').html(null);
$(this).formatCurrency({ roundToDecimalPlace: 2, eventOnDecimalsEntered: true });
})
.bind('decimalsEntered', function(e, cents) {
var errorMsg = 'Please do not enter any cents (0.' + cents + ')';
$('#warnOnDecimalsEnteredNotification2').html(errorMsg);
log('Event on decimals entered: ' + errorMsg);
}).bind('decimalsEntered', function(e, cents) {
if (String(cents).length > 2) {
var errorMsg = 'Don\'t enter more than 2 dec. places (' + cents + ')';
$('#warnOnDecimalsEnteredNotification2').html(errorMsg);
log('Event on decimals entered: ' + errorMsg);
}
});


// Format while typing & warn on decimals entered, no cents
$('#formatWhileTypingAndWarnOnDecimalsEntered').blur(function() {
$('#formatWhileTypingAndWarnOnDecimalsEnteredNotification').html(null);
$(this).formatCurrency({ colorize: true, negativeFormat: '-%s%n', roundToDecimalPlace: 0 });
})
.keyup(function(e) {
var e = window.event || e;
var keyUnicode = e.charCode || e.keyCode;
if (e !== undefined) {
switch (keyUnicode) {
case 16: break; // Shift
case 17: break; // Ctrl
case 18: break; // Alt
case 27: this.value = ''; break; // Esc: clear entry
case 35: break; // End
case 36: break; // Home
case 37: break; // cursor left
case 38: break; // cursor up
case 39: break; // cursor right
case 40: break; // cursor down
case 78: break; // N (Opera 9.63+ maps the "." from the number key section to the "N" key too!) (See: http://unixpapa.com/js/key.html search for ". Del")
case 110: break; // . number block (Opera 9.63+ maps the "." from the number block to the "N" key (78) !!!)
case 190: break; // .
default: $(this).formatCurrency({ colorize: true, negativeFormat: '-%s%n', roundToDecimalPlace: -1, eventOnDecimalsEntered: true });
}
}
})
.bind('decimalsEntered', function(e, cents) {
var errorMsg = 'Please do not enter any cents (0.' + cents + ')';
$('#formatWhileTypingAndWarnOnDecimalsEntered').formatCurrencyLive({
colorize: true,
negativeFormat: '-%s%n',
roundToDecimalPlace: 0,
eventOnDecimalsEntered: true
}).bind('decimalsEntered', function(e, cents) {
var errorMsg = 'Don\'t enter any cents (0.' + cents + ')';
$('#formatWhileTypingAndWarnOnDecimalsEnteredNotification').html(errorMsg);
log('Event on decimals entered: ' + errorMsg);
});


// Warn on decimals entered, no cents
$('#warnOnDecimalsEntered').blur(function() {
$('#warnOnDecimalsEnteredNotification').html(null);
$(this).formatCurrency({ roundToDecimalPlace: 0, eventOnDecimalsEntered: true });
})
.bind('decimalsEntered', function(e, cents) {
var errorMsg = 'Please do not enter any cents (0.' + cents + ')';
}).bind('decimalsEntered', function(e, cents) {
var errorMsg = 'Don\'t enter any cents (0.' + cents + ')';
$('#warnOnDecimalsEnteredNotification').html(errorMsg);
log('Event on decimals entered: ' + errorMsg);
});


// Format while typing & block decimal point entry
$("#formatWhileTypingDecimalsBlocked").formatCurrencyLive({
colorize: true,
negativeFormat: '-%s%n',
roundToDecimalPlace: -2
});

function log(text) {
$('#divLog').prepend('<div>' + text + '</div>');
}
Expand Down Expand Up @@ -160,12 +123,15 @@ <h3>No Decimals</h3>
<div>Format while typing & warn on decimals entered</div>
<input type="text" id="formatWhileTypingAndWarnOnDecimalsEntered" />
<span id="formatWhileTypingAndWarnOnDecimalsEnteredNotification" class="message"></span>


<div>Format while typing, block decimals entry</div>
<input type="text" id="formatWhileTypingDecimalsBlocked" />

<div>Warn on decimals entered</div>
<input type="text" id="warnOnDecimalsEntered" />
<span id="warnOnDecimalsEnteredNotification" class="message"></span>
</div>

<div class="sample log">
<input type="button" id="clearLog" value="clear" />
<h3>Log</h3>
Expand Down
2 changes: 1 addition & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery FormatCurrency Sample</title>
<script type="text/javascript" src="../external/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../external/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery.formatCurrency.js"></script>
<script type="text/javascript" src="../i18n/jquery.formatCurrency.all.js"></script>
<style type="text/css">
Expand Down

0 comments on commit bdb8525

Please sign in to comment.