Javascript 如何在引导插件中以货币格式显示输入字段中的数字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31861428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display number in input field's to currency format in bootstrap addon?
提问by Kiran Marturu
I'm working on small web form where I need to display number in the text field's as currency format in bootstrap appended addon.
我正在处理小型网络表单，我需要在文本字段中将数字显示为引导程序附加插件中的货币格式。
I'm able to achieve for a single field using jQuery selectors (I'm new to Javascript world), I wanted to do the same thing for aroung 10 fields.
我能够使用 jQuery 选择器实现单个字段（我是 Javascript 世界的新手），我想对大约 10 个字段做同样的事情。
I think there must be elegant solution rather than writing the same for every field.
我认为必须有优雅的解决方案，而不是为每个领域都编写相同的解决方案。
Kindly help me.
请帮助我。
My HTML Code:
我的 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>
My JS Code:
我的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);
});
});
My JSFiddle: http://jsfiddle.net/kiranm516/me52djL8/24/
我的 JSFiddle：http: //jsfiddle.net/kiranm516/me52djL8/24/
I copied the above code from (thanks to them): Add comma to numbers every three digits
我从（感谢他们）复制了上面的代码：每三位数字添加逗号
回答by benjarwar
Assign a class to your inputs, and then bind the keyup event to your class, rather than to an ID.
为您的输入分配一个类，然后将 keyup 事件绑定到您的类，而不是 ID。
Forked your JSFiddle: http://jsfiddle.net/zmbh4o2u/
分叉你的 JSFiddle：http: //jsfiddle.net/zmbh4o2u/
JS:
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);
});
});
Helpful tips:
有用的提示：
- In the handler function for your keyup event, you can access the element that fired the event with
this. Since you'll need that element a couple of times, it's customary to cache a jQuery object in a local var, hencevar $input = $(this). - When declaring multiple variables in JavaScript, it's best practice to chain them in a single
varstatement. You can comma separate your declarations, and use line breaks for legibility.
- 在 keyup 事件的处理函数中，您可以访问触发事件的元素
this。由于您多次需要该元素，因此习惯上将 jQuery 对象缓存在本地 var 中，因此var $input = $(this). - 在 JavaScript 中声明多个变量时，最好将它们链接在一条
var语句中。您可以用逗号分隔您的声明，并使用换行符来提高可读性。
