如何自定义 Masked Input jQuery 插件

发布于 2024-09-12 00:56:25 字数 646 浏览 10 评论 0原文

的 jQuery mask 插件

我正在使用http://digitalbush.com/projects/masked-input -plugin/

我想自定义我的插件，并已尽力做到这一点，但我做不到。

我想要的是

我只能输入数字。
所有数字将在每第三个数字后自动格式化（,）。
(.) 之后只有两位数字

我正在使用这个掩码：

$("#product").mask("999,999,999.99",{placeholder:" "});

问题是如果我只需要输入 150.50，我需要将光标放在确切的位置并输入。

例如，在上面的掩码中，如果我输入 150.50，文本框将如下所示： [][][],[][][],150.50 其中 [] 是空格。我想要的只是为了显示 150.50，没有额外的 (,)s。
如果我输入 1150.50，则显示 1,150.50，但我希望在输入完成后自动进行格式化，并且不想显示额外的任何 (,)。

原文

I am using the jQuery mask plugin from

http://digitalbush.com/projects/masked-input-plugin/

I want to customize my plugin and have tried my best to do it but I can't.

What I want is

I can enter digits only.
All the digits will be formatted automatically (,) after every 3rd number.
Only two digits after (.)

I am using this mask:

$("#product").mask("999,999,999.99",{placeholder:" "});

The problem with this is if I need to type only 150.50, I need to bring my cursor on the exact place and type.

For example in the above mask if I type 150.50 the text box looks like this:
[][][],[][][],150.50 where [] is a blank space. What I want is for only
150.50 to be shown, without the extra (,)s.
If I type 1150.50 then show 1,150.50, but I want the formatting to automatically occur once I am done typing and don't want to show extra any (,)s.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

带上头具痛哭 2024-09-19 00:56:25

加比的答案是正确的，并且提供了比我更多的选择。但是，我针对您的特定需求提出了一个解决方案。请在此处查看。

$('input').bind('keyup blur', function(){
    var i, j, final = '', input = $(this),
        raw = input.val().replace(/[^\d]/g, '');
    while (raw.substr(0, 1) === '0' && raw.length > 2) { //remove leading 0s for large numbers
        raw = raw.substr(1);
    }
    while (raw.length < 2) { //pad with up to two 0s for small numbers
        raw = '0' + raw;
    }
    for (i = 1; i <= raw.length; i++) { //format the number as ##,###,###.##
        j = raw.length - i;
        final =
            (i === 2 ? '.' : ((i + 1) % 3) === 0 && i != raw.length ? ',' : '')
            + raw.substr(j, 1)
            + final;
    }
    input.val(final);
});

Gaby's answer is correct and provides far more options than mine. However, I whipped up a solution for your specific needs. View it here.

$('input').bind('keyup blur', function(){
    var i, j, final = '', input = $(this),
        raw = input.val().replace(/[^\d]/g, '');
    while (raw.substr(0, 1) === '0' && raw.length > 2) { //remove leading 0s for large numbers
        raw = raw.substr(1);
    }
    while (raw.length < 2) { //pad with up to two 0s for small numbers
        raw = '0' + raw;
    }
    for (i = 1; i <= raw.length; i++) { //format the number as ##,###,###.##
        j = raw.length - i;
        final =
            (i === 2 ? '.' : ((i + 1) % 3) === 0 && i != raw.length ? ',' : '')
            + raw.substr(j, 1)
            + final;
    }
    input.val(final);
});

回复收藏 0 原文