Coding Lifestyle

Currency TextBox with Javascript April 24, 2009

Posted by codinglifestyle in Javascript.
Tags: currency, Javascript, regular expression, textbox, validator
1 comment so far

This took me a long time so here it is for prosperity.  I started by looking at Ajax’s masked edit field in order to enforce a simply currency field.  This was a waste of time and not up for the job.  I accomplished it with javascript instead.  Very simple, no symbols, just #####.## with the cents being optional. 

Here is the script:

/*

**  Returns the caret (cursor) position of the specified text field.

**  Return value range is 0-oField.length.

*/

function doGetCaretPosition(oField) {

 

    // Initialize

    var iCaretPos = 0;

 

    // IE Support

    if (document.selection) {

 

        // Set focus on the element

        oField.focus();

 

        // To get cursor position, get empty selection range

        var oSel = document.selection.createRange();

 

        // Move selection start to 0 position

        oSel.moveStart(‘character’, -oField.value.length);

 

        // The caret position is selection length

        iCaretPos = oSel.text.length;

    }

 

    // Firefox support

    else if (oField.selectionStart || oField.selectionStart == ‘0’)

        iCaretPos = oField.selectionStart;

 

    // Return results

    return (iCaretPos);

}

 

function fnCurrencyOnly(o) {

    var sValue = o.value;

    var sKey = String.fromCharCode(window.event.keyCode);

    var range = document.selection.createRange();

    var pos = doGetCaretPosition(o);

 

    if (range.text == sValue) {

        sValue = sKey;

    } else {

        sValue = sValue.substr(0, pos) + sKey + sValue.substr(pos);

    }

    var re = new RegExp(“^\\d+(?:(\\.|\\,)\\d{0,2})?$”);

    if (!sValue.match(re))

        window.event.returnValue = false;

}

 

    <div>

        <input type=”text” onkeypress=”fnCurrencyOnly(this);” />

    </div>

 

I’m sure sure who the original author is, but I found the script for doGetCaretPosition() here: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/

Enjoy!