货币 jQuery 的屏蔽输入

发布于 2024-12-03 11:41:52 字数 206 浏览 2 评论 0原文

在我的网络应用程序中,我有一个名为“预算”的输入字段,用户可以在其中输入项目的建议预算。我需要创建一个屏蔽输入,以便在用户在输入字段中输入时自动将输入的金额转换为以下格式:

1 000
10 000
100 000

我在互联网上搜索过,但似乎没有找到必要的。有人能给我指出一个合适的插件或者建议一个自定义解决方案吗?

提前致谢。

In my web application I have an input field called "Budget" where users enter the proposed budget for a project. I need to create a masked input to automatically bring the entered amount to the following format while the user is typing into the input field:

1 000
10 000
100 000

I've searched throughout the Internet but don't seem to find the necessary one. Could anybody point me to a suitable plugin or maybe suggest a custom solution?

Thanks in advance.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(4

苍暮颜 2024-12-10 11:41:52

尝试以下任何一个:

http://plugins.jquery.com/tag/currency/

这些也可能包含您的内容正在寻找:

http://plugins.jquery.com/tag/mask/

Try any of these:

http://plugins.jquery.com/tag/currency/

These may also contain what you're looking for:

http://plugins.jquery.com/tag/mask/

农村范ル 2024-12-10 11:41:52

我使用以下代码来归档货币格式,而不使用其他插件:

$('input.money-bank').on('keydown',function(e){    
    // tab, esc, enter
    if ($.inArray(e.keyCode, [9, 27, 13]) !== -1 ||
        // Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
        // home, end, left, right, down, up
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        return;
    }

    e.preventDefault();

    // backspace & del
    if($.inArray(e.keyCode,[8,46]) !== -1){
        $(this).val('');
        return;
    }

    var a = ["a","b","c","d","e","f","g","h","i","`"];
    var n = ["1","2","3","4","5","6","7","8","9","0"];

    var value = $(this).val();
    var clean = value.replace(/\./g,'').replace(/,/g,'').replace(/^0+/, '');   

    var charCode = String.fromCharCode(e.keyCode);
    var p = $.inArray(charCode,a);

    if(p !== -1)
    {
        value = clean + n[p];

        if(value.length == 2) value = '0' + value;
        if(value.length == 1) value = '00' + value;

        var formatted = '';
        for(var i=0;i<value.length;i++)
        {
            var sep = '';
            if(i == 2) sep = ',';
            if(i > 3 && (i+1) % 3 == 0) sep = '.';
            formatted = value.substring(value.length-1-i,value.length-i) + sep + formatted;
        }

        $(this).val(formatted);
    }    

    return;

});

JSFiddle:
https://jsfiddle.net/gt2Ly5rt/6/

使用此脚本,用户将仅输入数字,脚本将自动放置小数点和千位分隔符(它被硬编码为 BRL 格式,但您可以自定义它)。

例如,如果用户输入:

  • “1”,则显示:“0,01”
  • “12”,则显示:“0,12”
  • “123”,则显示:“1,23”
  • “123456”,它会显示:“1.234,56”

希望它对某人有帮助。

I use the following code to archieve currency format without use of additional plugins:

$('input.money-bank').on('keydown',function(e){    
    // tab, esc, enter
    if ($.inArray(e.keyCode, [9, 27, 13]) !== -1 ||
        // Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
        // home, end, left, right, down, up
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        return;
    }

    e.preventDefault();

    // backspace & del
    if($.inArray(e.keyCode,[8,46]) !== -1){
        $(this).val('');
        return;
    }

    var a = ["a","b","c","d","e","f","g","h","i","`"];
    var n = ["1","2","3","4","5","6","7","8","9","0"];

    var value = $(this).val();
    var clean = value.replace(/\./g,'').replace(/,/g,'').replace(/^0+/, '');   

    var charCode = String.fromCharCode(e.keyCode);
    var p = $.inArray(charCode,a);

    if(p !== -1)
    {
        value = clean + n[p];

        if(value.length == 2) value = '0' + value;
        if(value.length == 1) value = '00' + value;

        var formatted = '';
        for(var i=0;i<value.length;i++)
        {
            var sep = '';
            if(i == 2) sep = ',';
            if(i > 3 && (i+1) % 3 == 0) sep = '.';
            formatted = value.substring(value.length-1-i,value.length-i) + sep + formatted;
        }

        $(this).val(formatted);
    }    

    return;

});

JSFiddle:
https://jsfiddle.net/gt2Ly5rt/6/

With this script, the user will enter only numbers, the script will automatically place decimal and thousands separators (it is hardcoded to BRL format, but you can customize it).

For instance, if user types:

  • "1", it will display: "0,01"
  • "12", it will display: "0,12"
  • "123", it will display: "1,23"
  • "123456", it will display: "1.234,56"

Hope it helps someone.

眉目亦如画i 2024-12-10 11:41:52

仅使用 Javascript 的简单解决方案。

String.prototype.reverse = function () {
        return this.split("").reverse().join("");
    }

    function reformatText(input) {        
        var x = input.value;
        x = x.replace(/,/g, ""); // Strip out all commas
        x = x.reverse();
        x = x.replace(/.../g, function (e) {
            return e + ",";
        }); // Insert new commas
        x = x.reverse();
        x = x.replace(/^,/, ""); // Remove leading comma
        input.value = x;
    }
.currencyinput {
  border-color: #98969a;
    border-style: solid;
    border-width: 0.5px;
    display: inline-block;
}
  

.currencyinput input {   
    border-style: solid solid solid none;
    border-width: 0 0 0 thin;
}
<span class="currencyinput">
lt;input type="text" onkeyup="reformatText(this)" name="currency"></span>

Simple Solution using Only Javascript.

String.prototype.reverse = function () {
        return this.split("").reverse().join("");
    }

    function reformatText(input) {        
        var x = input.value;
        x = x.replace(/,/g, ""); // Strip out all commas
        x = x.reverse();
        x = x.replace(/.../g, function (e) {
            return e + ",";
        }); // Insert new commas
        x = x.reverse();
        x = x.replace(/^,/, ""); // Remove leading comma
        input.value = x;
    }
.currencyinput {
  border-color: #98969a;
    border-style: solid;
    border-width: 0.5px;
    display: inline-block;
}
  

.currencyinput input {   
    border-style: solid solid solid none;
    border-width: 0 0 0 thin;
}
<span class="currencyinput">
lt;input type="text" onkeyup="reformatText(this)" name="currency"></span>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文