【问题标题】:jQuery number separator - Separate number by each 1.000jQuery 数字分隔符 - 每 1.000 分隔数字
【发布时间】:2010-05-19 06:29:47
【问题描述】:

我正在开发一个新网站,在这里用户可以在输入文本字段中输入价格。所以我需要一些 jQuery 代码来转换输入的价格。这意味着,当用户输入“1000”时,输入字段中的可见文本将自动转换为“1.000” - 带有句点。如果他们输入“10000”,则应将其转换为“10.000”等。 你可以在我找到的这个网站上看到一个活生生的例子:http://www.boligsiden.dk/ 我知道它在丹麦语上,但在地图下方的首页上,有输入字段。其中之一是说“Minimum kontaktpris”。您可以尝试在此处输入一个数字,然后查看我要查找的效果。

有谁知道我如何做到这一点?是通过 jQuery 插件,还是通过一些“自制”代码?

【问题讨论】:

    标签: jquery plugins numbers transform


    【解决方案1】:

    【讨论】:

    • 这看起来是个不错的工具,但我看不到任何演示,所以我不知道如何使用它。如何将我的几个输入字段连接到此工具。能给个代码示例吗?
    【解决方案2】:

    我会在 php.js 中使用数字格式: http://phpjs.org/functions/number_format:481

    然后做这样的事情:

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

    【讨论】:

    • 我不太在 .NET 中工作,但它完全是客户端,所以是的,它应该。
    【解决方案3】:

    JavaScript: The Good Parts

    别忘了感谢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;
    }
    

    【讨论】:

    • 嗨阿努拉格。我刚刚试过这个,但我能看到的唯一问题是,当我在输入字段中标记文本并按下一个新数字时,新数字只是插入到旧数字的末尾。怎么会这样?能解决吗?
    猜你喜欢
    • 2023-02-25
    • 1970-01-01
    • 2013-04-11
    • 1970-01-01
    • 1970-01-01
    • 2019-01-30
    • 2011-02-03
    • 2014-02-10
    • 2015-08-02
    相关资源
    最近更新 更多