Изменить формат чисел во вводимом тексте - PullRequest
Новая
       9

Изменить формат чисел во вводимом тексте

0 голосов
/ 16 января 2020

Я хочу изменить числовой формат с (,) в тысячах, например, с 2000 до 2000, с 20000 до 20000 и так далее. Я попытался просмотреть и нашел подходящую библиотеку, которая расщепляется. js, но есть одна проблема в этой библиотеке, которая заключается в том, что я могу распознать только один селектор, хотя есть много входных текстов, которые я хочу изменить, у кого-нибудь есть другое решение? 

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

Ответы [ 5 ]

2 голосов
/ 16 января 2020

Одновременно можно применять только один экземпляр для очистки:

.input-element - это уникальный элемент DOM. Если вы хотите применить Cleave для нескольких элементов, вам нужно предоставить различные селекторы CSS и применить к каждому из них, по сути, вы можете создать отдельный экземпляр по al oop

- Cleave Documentation

Следуя этому совету, вы можете добиться этого, используя .querySelectorAll() с .forEach() до l oop по всем элементы с вашим классом и примените экземпляр 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" />
0 голосов
/ 16 января 2020

Вам не нужно добавлять библиотеку для этого, вы можете добиться этого с помощью простого регулярного выражения. Это также работает для десятичных чисел. 

const formatNumber = (num)=> {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}
0 голосов
/ 16 января 2020

Вы можете использовать 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

0 голосов
/ 16 января 2020

Вы можете сделать что-то вроде этого. 

//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="" />
0 голосов
/ 16 января 2020

вы можете использовать toLocaleString ()

Пример фрагмента 

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

Проблема в этом состоит в том, что возвращаемая строка является строкой, или вы можете проверить эту библиотеку Число. js может быть интересно.

Или, как предложил David Japan, вы можете использовать Intl.NumberFormat

Образец фрагмента 

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