我想用 ( ,
) 以千为单位更改数字格式,例如 2000 到 2,000 20000 到 20,000 等等。我尝试浏览并找到了一个合适的库 cleave.js,但是这个库中有一个问题是我只能识别一个选择器,而我想更改很多输入文本,有没有人还有其他解决方案吗?
var cleave = new Cleave('.loan_max_amount', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
我想用 ( ,
) 以千为单位更改数字格式,例如 2000 到 2,000 20000 到 20,000 等等。我尝试浏览并找到了一个合适的库 cleave.js,但是这个库中有一个问题是我只能识别一个选择器,而我想更改很多输入文本,有没有人还有其他解决方案吗?
var cleave = new Cleave('.loan_max_amount', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
您一次只能将一个 cleave 实例应用于一个元素:
.input-element 这里是唯一的 DOM 元素。如果要对多个元素应用 Cleave,则需要提供不同的 CSS 选择器并应用到它们中的每一个,有效地,您可能希望通过循环创建单个实例
-切割文档
按照这个建议,您可以通过使用.querySelectorAll()
with.forEach()
来循环使用您的类的所有元素并将 cleave 实例应用于每个元素,如下所示:
document.querySelectorAll('.loan_max_amount').forEach(inp => new Cleave(inp, {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
}));
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.5.3/dist/cleave.min.js"></script>
<input type="text" class="loan_max_amount" />
<input type="text" class="loan_max_amount" />
你可以使用toLocaleString()
示例片段
var n = 34523453.345
let seperated = n.toLocaleString()
console.log(seperated)
这个问题基本上是返回是一个字符串,或者你可以检查这个库Numeral.js可能很有趣。
或者正如 David Japan 建议的那样,您可以使用Intl.NumberFormat
示例片段
let number = 123000
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
您可以使用Intl.NumberFormat
const number = 123456.789;
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"
// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "¥123,457"
// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
// expected output: "1,23,000"
它不是来自cleave.js,但你可以在这里找到它:https ://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
你可以做这样的事情。
//jQuery
$(".test").on('keyup', function(){
var n = parseInt($(this).val().replace(/\D/g,''),10);
$(this).val(n.toLocaleString());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="test" id="formattedNumberField" value="" />
<input type="text" class="test" id="formattedNumberField1" value="" />
您不需要为此添加库,您可以使用简单的正则表达式来实现它。这也适用于十进制数。
const formatNumber = (num)=> {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}