Jquery数字格式化程序

Question

在文本框中,我想在用户输入数字时格式化文本.1234应该变成1,234.00.它也应该在您执行复制粘贴时起作用.

我想知道组中是否有任何人使用任何好的jquery插件.我只在文本框上需要它.

Answer 1

我只是把一个jQuery插件放在一起,它会做你想要的.玩jsFiddle.我会在这里打破这些碎片.

插件

该插件将接受一些选项来指定千位和小数分隔符,以及数字小数侧所需的零数.

var defaultOptions = {
    thousands: ',',
    decimal: '.',
    zeroes: 2    
};

$.fn.currencyField = function(options) {
    var opts = this.options = $.extend({}, defaultOptions, options);
    this.bind('paste', function(e) { onPaste(e,opts); });
    this.bind('change', function(e) { onChange(e,opts); });
};

你可以像这样使用它

$('input[type=text]').currencyField();

'粘贴'事件

jQuery将绑定到一个未记录的'paste'事件,无论粘贴内容如何都应触发该事件.遗憾的是,在将内容添加到输入字段之前,事件本身会触发,因此您需要在格式化字段内容之前设置短暂超时.

function onPaste(evt, options) {
    window["currencyField-target"] = evt.target;
    window.setTimeout(function() {
        $(window["currencyField-target"]).trigger("change");
    }, 10);
}

function onChange(evt, options) {
    if (isFormattableValue(evt.target.value)) {
        evt.target.value = formatValue(evt.target.value, options);
    }
}

格式化成千上万

有几种方法可以做到这一点,但它们都非常依赖于将整数转换为字符串,颠倒字符的顺序,在每第三个字符之间插入分隔符,然后再次反转顺序.

function formatThousands(value, separator) {
    var buf = [];
    value = String(value).split('').reverse();
    for (var i = 0; i < value.length; i++) {
        if (i % 3 === 0 && i !== 0) {
            buf.push(separator);
        }   
        buf.push(value[i]);
    }
    return buf.reverse().join('');
}

格式化小数

在这个插件中,十进制之后要包含的字符数是可变的,所以我们将数值转换为String并从中获取第一个'n'个字符.如果没有足够的字符,那么我们将在开头添加零,直到有.

function formatDecimal(value, zeroes) {
    value = value || 0;
    value = String(value).substr(0,zeroes);
    zeroes = zeroes - value.length;
    for (zeroes; zeroes > 0; zeroes--) {
        value = value + '0';    
    }
    return value;
}