更改输入文本中的数字格式

Question

我想更改以千为单位的 (,) 的数字格式，例如 2000 到 2,000 20000 到 20,000 等等。我试着浏览了一下，找到了一个合适的图书馆 cleave.js，但是这个库有一个问题就是我只能识别一个选择器，虽然有很多我想更改的输入文本，有人有其他解决方案吗？

var cleave = new Cleave('.loan_max_amount', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});

Answer 1

你可以使用toLocaleString()

示例片段

var n = 34523453.345
let seperated = n.toLocaleString()
console.log(seperated)

这个问题基本上是 return 是一个字符串，或者你可以查看这个库 Numeral.js 可能会很有趣。

或者像 David Japan 建议你可以使用 Intl.NumberFormat

示例片段

let number = 123000
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));

Answer 2

您可以使用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 but you can find it here: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

Answer 3

你可以这样做。

//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="" />

Answer 4

您一次只能将切割实例应用于一个元素：

.input-element here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different CSS selectors and apply to each of them, effectively, you might want to create individual instance by a loop

- Cleave Documentation

按照这个建议，您可以通过使用 .querySelectorAll() with .forEach() 来实现这一点，用 class 遍历所有元素并对每个元素应用一个切割实例，如下所示：

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" />

Answer 5

你不需要为此添加库，你可以通过简单的方式实现它regex.This也适用于十进制数。

const formatNumber = (num)=> {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, ',')
}

更改输入文本中的数字格式

Change the number format in the input text

javascript

jquery

javascript-objects

cleave