如何在 bootstrap 插件中将输入字段中的数字显示为货币格式？

Question

我正在处理小型 Web 表单，我需要在 bootstrap 附加插件中以货币格式在文本字段中显示数字。

我可以使用 jQuery 选择器实现单个字段（我是 Javascript 世界的新手），我想对 10 个字段做同样的事情。

我认为一定要有优雅的解决方案，而不是每个领域都写一样的。

请帮助我。

我的HTML代码：

<div class="control-group">
    <label class="control-label">Loan Amount 1</label>
    <div class="controls">
        <div class="input-append">
            <input class="span2" id="loanAmount1" type="text">
            <span class="add-on" id="loanAmount1Cur">$</span>
        </div>
    </div>
</div>
<div class="control-group">
    <label class="control-label">Loan Amount 2</label>
    <div class="controls">
        <div class="input-append">
            <input class="span2" name="loanAmount2" type="text">
            <span class="add-on" name="LoanAmount2Cur">$</span>
        </div>
    </div>
</div>

我的 JS 代码：

$(document).ready(function () {
        $("#loanAmount1").on("keyup", null, function () {
            var input = $("#loanAmount1").val();
            var num = parseFloat(input).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ',') + " $";
            $("#loanAmount1Cur").html(num);
        });
    });

我的 JSFiddle：http://jsfiddle.net/kiranm516/me52djL8/24/

我从（感谢他们）复制了上面的代码：Add comma to numbers every three digits

Answer 1

为您的输入分配一个 class，然后将 keyup 事件绑定到您的 class，而不是 ID。

分叉你的 JSFiddle：http://jsfiddle.net/zmbh4o2u/

JS:

$(document).ready(function () {
    $(".loan-input").on("keyup", null, function () {
        var $input = $(this),
            value = $input.val(),
            num = parseFloat(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ',');

        $input.siblings('.add-on').text('$' + num);
    });
});

有用的提示：

在 keyup 事件的处理函数中，您可以使用 this 访问触发事件的元素。由于您将多次需要该元素，因此通常将 jQuery 对象缓存在本地变量中，因此 var $input = $(this).
在 JavaScript 中声明多个变量时，最好将它们链接在单个 var 语句中。您可以用逗号分隔您的声明，并使用换行符以提高易读性。

如何在 bootstrap 插件中将输入字段中的数字显示为货币格式？

How to display number in input field's to currency format in bootstrap addon?

javascript

jquery

jquery-validate

twitter-bootstrap