jQuery number seperator - Seperate number by each 1.000

Question

Hi

I'm developing a new site, and in here it's possible for the user to type in a price in a input-textfield. So what I need is some jQuery-code to transforn the typed in price. This means, that when a user types in "1000", the vissible text in the input field shall automatically be transformed to "1.000" - with a period. And if they type in "10000" it should be transformed to "10.000" etc. You can see a live example on this website I found: http://www.boligsiden.dk/ I know it's on danish, but on the frontpage under the map, there are to input fields. One of them is saying "Minimum kontaktpris". You can try to type in a number in here, and see the effect that I'm looking for.

Does anybody know how I can achieve this? Either by a jQuery plugin, or by some "homemade"-code?

Thanks in advance.

/Kim Andersen

Answer 1

I would use the number format in the php.js: http://phpjs.org/functions/number_format:481

then do something like this:

$(element).change( function() {
    $(this).val( number_format( $(this).val(), 0, '.', '.' ) );
}

Answer 2

JavaScript: The Good Parts

Don't forget to thank http://www.boligsiden.dk

function NumericBox_KeyDown(o, e, separate, allowComma) {
    o.onkeypress = o.onkeyup = null;
    if (!e) e = window.event;
    var code = e.keyCode;
    if (!code && e.which) code = e.which;
    if (code >= 96 && code <= 105) code -= 48;
    var preventDefault = ((code > 57 && (code != 110 && code != 188)) || code == 32 || (code >= 48 && e.shiftKey));
    if (!allowComma && (code == 188 || code == 110)) preventDefault = true;
    if (!preventDefault) {
        if (separate) {
            if (NumericBox_CanSelect(o)) {
                if (((code >= 48 && code <= 57) || code == 8 || code == 46 || code == 110 || code == 188)) {
                    preventDefault = NumericBox_FormatNumber(o, code, allowComma);
                }
            }
        }
    }
    if (preventDefault) {
        o.onkeypress = o.onkeyup = function (e) {
            if (!e) e = window.event;
            return false;
        };
        return false;
    }
    return true;
}

function NumericBox_CanSelect(o) {
    return (typeof(o.createTextRange) != 'undefined' || typeof(o.selectionStart) != 'undefined');
}

function NumericBox_FormatNumber(o, code, allowComma) {
    if (!allowComma && (code == 188 || code == 110)) return true;
    var preventDefault = false;
    var startPos = getSelectionStart(o);
    var endPos = getSelectionEnd(o);
    var s = o.value;

    //delete all non numbers except one optional comma
    var i = o.value.length - 1;
    while (i >= 0) {
        var c = s.charAt(i);
        if (c < '0' || c > '9') {
            if (c == ',' && allowComma == true) {
                allowComma = false;
            } else {
                s = s.substring(0, i) + s.substring(i + 1);
                if (startPos > i) startPos--;
                if (endPos > i) endPos--;
            }
        }
        i--;
    }
    if (startPos == 1 && s.charAt(0) == '0' && code == 48) preventDefault = true;
    if (startPos == 0 && s.length > 0 && code == 48) preventDefault = true;
    while (s.length > 0 && s.charAt(0) == '0' && s.charAt(1) != ',' && code != 48) {
        s = s.substring(1);
        startPos--;
        endPos--;
    }
    if (code == 188 || code == 110) {
        preventDefault = !allowComma;
        if (allowComma && startPos == 0) {
            s = '0' + s;
            startPos++;
            endPos++;
        }
    }

    var s2 = s.substring(0, startPos);
    for (var k = startPos; k < endPos; k++)
    s2 += 'B';
    s2 += s.substring(endPos);
    var s3 = s2;
    var s4 = s;
    if (code >= 48 && code <= 57 && !preventDefault) {
        s3 = s3.substring(0, startPos) + 'A' + s3.substring(startPos);
        s4 = s4.substring(0, startPos) + 'A' + s4.substring(startPos);
    }
    if (code == 8 && startPos == endPos && !preventDefault) {
        if (s3.charAt(startPos - 1) == ',') {
            s3 = s3.substring(0, startPos - 1) + 'B' + s3.substring(startPos);
        } else {
            s3 = s3.substring(0, startPos) + 'C' + s3.substring(startPos);
            s4 = s4.substring(0, startPos) + 'C' + s4.substring(startPos);
        }
    }
    if (code == 46 && startPos == endPos && !preventDefault) {
        if (s3.charAt(startPos) == ',') {
            s3 = s3.substring(0, startPos) + 'B' + s3.substring(startPos + 1);
        } else {
            s3 = s3.substring(0, startPos + 1) + 'C' + s3.substring(startPos + 1);
            s4 = s4.substring(0, startPos + 1) + 'C' + s4.substring(startPos + 1);
        }
    }

    var commaPos = s3.indexOf(',');
    if (commaPos < 0) commaPos = s3.length;
    if ((code == 188 || code == 110) && !preventDefault) commaPos = startPos;
    var j = 0;
    for (var l = commaPos; l > 0; l--) {
        if (s3.charAt(l) == 'C') j -= 2;
        if (j > 2) {
            if (l <= startPos) {
                startPos++;
                endPos++;
            }
            s4 = s4.substring(0, l) + '.' + s4.substring(l);
            j = 0;
        }
        if (s3.charAt(l - 1) != 'B') j++;
    }

    o.value = s4.replace('A', '').replace('C', '');
    setCursorPosition(o, startPos, endPos);
    if (typeof(document.execCommand) != 'undefined') try {
        document.execCommand('OverWrite', false, false);
    } catch (e) {}
    return preventDefault;
}


function getSelectionStart(o) {
    if (o.createTextRange) {
        var r = document.selection.createRange().duplicate()
        r.moveEnd('character', o.value.length)
        if (r.text == '') return o.value.length
        return o.value.lastIndexOf(r.text)
    } else return o.selectionStart
}

function getSelectionEnd(o) {
    if (o.createTextRange) {
        var r = document.selection.createRange().duplicate()
        r.moveStart('character', -o.value.length)
        return r.text.length
    } else return o.selectionEnd;
}

Answer 3

Jquery Plugin: http://plugins.jquery.com/project/currencynumberformatter