I have a little web application that I wrote to balance my check book. I often enter a calculated value into a form text field. I usually use the Google Calculator in the Firefox Search Bar to perform the calculations. I often perform simple calculations like “25 * .03”. (Why? I impose a personal finance fee on each credit card purchase that I make. I use a 3% fee. I put all of my personal finance fees into an online high-interest savings account. So, if I charge $25.00 on a card, I transfer “25 * .03” or $0.75 to my online savings account. It isn’t much, but it adds up.) So, yesterday, I thought, “I wonder if I can integrate Google Calculator functionality into my web application?”
Here is what I came up with.
Calculator example.
You can take a look at the source of the “calculator.html“. It includes “JPetersonCalculator100.js“, which is where the JavaScript that actually implements the calculator is sourced. The calculator function is attached to the text input field using an onKeyPress event handler in the HTML:
onkeypress="processCalculatorKeyPress(event, 2);"
Here is the processCalculatorKeyPress function.
001: /**
002: * Handle a key press from a text field that can automatically calculate a
003: * derived value. Basically, enter normal mathematical formula like
004: * "5 * .03 =". When you press the equal ("=") key, the value in the text field
005: * will be replaced with the calculated value. If the value can't be
006: * calculated, it is left unchanged.
007: *
008: * @param e the event
009: * @param precision the decimal precision to round to.
010: */
011: function processCalculatorKeyPress(e, precision) {
012: var targ;
013: if (!e) var e = window.event;
014: if (e.target) targ = e.target;
015: else if (e.srcElement) targ = e.srcElement;
016: if (targ.nodeType == 3) // defeat Safari bug
017: targ = targ.parentNode;
018:
019: if (e.keyCode) code = e.keyCode;
020: else if (e.which) code = e.which;
021:
022: if (code == 61) { // '='
023: var expression;
024: var result;
025: expression = targ.value;
026:
027: try {
028: // calculate, evaluating arithmetic expression
029: result = eval(expression);
030:
031: if (typeof result == "number") {
032: // round, if necessary
033: if (typeof precision == "number") {
034: if (precision > 0) {
035: if (result.toFixed) {
036: result = result.toFixed(precision);
037: } else {
038: var factor = Math.pow(10,precision);
039: result = Math.round(result * factor) / factor;
040: }
041: }
042: }
043:
044: targ.value = result;
045:
046: // don't display key that triggered the calculation
047: if (e.preventDefault) {
048: e.preventDefault();
049: } else {
050: e.returnValue = false; // IE
051: }
052: }
053: } catch (e) {
054: // expression wasn't an arithmetic expression, let normal text be displayed
055: }
056: }
057:
058: // var character = String.fromCharCode(code);
059: // alert('Code was: ' + code + ' Character was: [' + character + '] targ: [' + targ.value + ']');
060:
061: return false;
062: }
Lines 12 -10 process the event, makeing a “normalized” version that handles differences in browser implementations. Since the function processCalculatorKeyPress is called for EVERY key press, line 22 filters out all key presses except for the one that we care about: the equals (“=”) key. Line 25 saves the value currently entered into the text field. Line 29 uses the JavaScript eval function to evaluate the arithmetic expression. (This is the actual calculator. The rest of the function make the results look pretty.) The “try”, on line 27, and associated “catch”, on line 53, are there to handle any error thrown by the “eval” function. An error would be thrown if the value entered into the test field was not an arithmetic expression. (Or more generally, not a valid JavaScript expression, since “eval” found evaluate any valid JavaScript expression. But that’s not really useful for the calculator.) Line 31 makes sure that the result of the “eval” is a number. Note that execution will only reach line 31 if “eval” didn’t throw an exception. Lines 33 through 41 perform any required rounding of the result. If available, line 36 uses the “toFixed” function to convert the number to the requested number of decimal places, rounding and padding with zero as necessary. If this function is not available, lines 38 and 39 perform rounding without any padding. Line 44 assigns the result of the arithmetic expression to the text input form element. Lines 47-51 indicate that the calculation succeeded so that the equals sign isn’t added to value of the text input field. Line 58 and 59 are commented out. But they illustrate how you can use an alert box to see what characters are pressed. I used this technique when developing the function.
That’s it. It should be relatively easy for you to include this build in text field calculator into your own web application. The basic steps are:
- Include the JavaScript function “processCalculatorKeyPress”.
- Add the “onkeypress” to the text fields that you would to support the build in calculator functionality. You can configure the precision value, from no rounding (use a negative value, like “-1”) to whatever decimal place is important. For currency input, I use a precision of “2”.
