Маска для ввода денег

233
01 марта 2018, 12:03

Всем добрый день, появилась необходимость в составлении маски для ввода денег.

Для поля ввода денег использую плагин jQuery-Mask-Plugin. Например есть сумма 50000, при вводе в поле по правилам маски $('.money').mask('000 000 000 000 000', {reverse: true}); получается 50 000 что правильно, но иногда надо ввести точку, и тут возникает трудность. Нужна помощь в построении паттерна.

Попробовал сделать так:

$('.money').mask('ZZZXZZZXZZZXZZZ', {
    translation: {
      'Z': {
        pattern: /\d/, reverse: true
      },
      'X': {
        pattern: /\s|\./, reverse: true
      }
    }
});

Но это не решение, так как пробел всегда надо вводить в ручную. И это правило для 3-х значного числа, т.е 2.5 не написать. Нужно также учитывать что после точки не должно автоматически проставляться пробел. Даже можно использовать какое нибудь кастомное решение.

Answer 1

Там в документации к библиотеке много хороших примеров. Вот вариант решения для вашей задачи:

jQuery('.money').mask('# ##0.00', { 
  reverse: true, 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.js"></script> 
 
<div> 
  Money: 
  <input class="money" type="text" /> 
</div>

Пример на JSFiddle.

В данном варианте длина строки не задана жёстко, но предполагается наличие точки для десятичной части. Если точка стоит, все пробелы расставляются корректно.

READ ALSO
jquery обернуть тег body разными тегами [требует правки]

jquery обернуть тег body разными тегами [требует правки]

Добрый деньПодскажите, как сделать из

178
Обработка нажатий переключателя

Обработка нажатий переключателя

Есть 5 переключателей надо чтобы при смене их позиций вкл/выкл менялся цвет текста рядом с нимиЦвет текста не важен

225
Библиотека для candlestick графиков

Библиотека для candlestick графиков

Всем привет, посоветуйте пожалуйста библиотеку для candlestick графиков чтоб прям как на биржах(скрины приложил)

228
Добавление атрибута в тег при условии

Добавление атрибута в тег при условии

В PrimeNG есть компонент p-table для отображения таблицыДля каждой колонки таблицы можно указать, можно будет ли менять её размер, для этого необходимо...

181