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将绑定到一个未记录的“粘贴”事件，无论粘贴内容如何都应触发该事件。不幸的是，在将内容添加到输入字段之前，事件本身会触发，因此您需要在格式化字段内容之前设置短暂超时。

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;
}

Answer 2

这是Number Format Plugin。不幸的是，描述似乎是葡萄牙语。

Answer 3

这个完全符合您的需求：http://scottonwriting.net/sowblog/archive/2011/06/25/creating-a-currency-masked-textbox-with-on-the-fly-currency-formatting.aspx

Answer 4

试试这个，这是我发现的最好的插件：

jquery-numberformatter - 文档位于jquery.numberformatter-1.2.2.js文件中。

formatNumber(options, writeBack, giveReturnValue)

从主题中读取值，解析为Javascript Number对象，然后使用传递的选项格式化回文本并写回主题。

parseNumber(options)

使用传递的选项将主题中的值解析为Number对象，以解析文本中的实际数字，然后将值作为文本写回主题。

或者，试试这个。它看起来也很好：

jquery-formatcurrency

Jquery数字格式化程序

4 个答案:

插件

'粘贴'事件

格式化千位

格式化小数