Блог

Я использую маску ввода для поля ввода валюты (USD). Я также использую dinero.js для обработки операций с числами с плавающей запятой, для которых требуется передать ему целое число. Проблема в том, что когда пользователь нажимает на поле ввода, второй ноль после десятичной точки удаляется маской ввода, что приводит к неправильным значениям формы при преобразовании в целое число.

Это моя маска ввода:

  $('body').on('focus', 'input.money', function(){
        $(this).inputmask("numeric", {
            radixPoint: ".",
            groupSeparator: ",",
            digits: 2,
            autoGroup: true,
            prefix: '$',
            oncleared: function () { $(this).val(''); }
        });
    });
  

Когда форма отправлена, я удаляю десятичную точку и просто передаю ее в свою ajax-функцию, а если десятичного числа нет, я умножаю на 100 и передаю его.

итак, в описанном выше примере, если при загрузке страницы ввод предварительно заполнен на 100,00 долларов, а затем я нажимаю на него, он становится 100,0 долларов. Затем, если бы я просто отступил назад и ввел $ 10, он сохранил бы значение .0, так что введенное значение равно $ 10.0.

При отправке формы десятичное число удаляется, и значение становится целочисленным значением 100, которое затем неправильно устанавливается как значение в размере 10,00 долларов.

Надеюсь, это имеет смысл. Я планирую добавить проверку формы, чтобы убедиться, что после десятичной дроби перед отправкой формы есть 2 места, но это также беспокоит меня с точки зрения UX. Я чувствую, что использовал этот плагин в прошлом, и он работал очень хорошо, поэтому я чувствую, что я что-то здесь напутал.

Подводя итог: если значение заполняется значением 100,00 долларов при загрузке страницы, когда поле получает фокус, я хочу, чтобы значение оставалось 100,00 долларов, а не менялось на 100,0 долларов.

Вот как я удаляю десятичное число из значений. Я также использую это для значений, поступающих из базы данных, поэтому я также удаляю $ и , .

 function strip(value) {
    if(value.indexOf('.') > -1) {
      return parseInt(value.replace('$','').replace(',','').replace('.','')) || 0;
    } else {
      return parseInt(value.replace('$','').replace(',','')) * 100 || 0;
    }

  }
  

Вы можете попытаться принудительно ввести 2 десятичных знака с помощью маски:

 alias: 'decimal',
mask: "99[.99]"
  

Звучит как dinero.js это создает конфликт. Кроме того, для отправки попробуйте метод unmaskedvalue для вашего значения:

 var value = $(selector).inputmask('unmaskedvalue');
  

Или, если вы решили не использовать ajax для отправки, вы можете добавить removeMaskOnSubmit к атрибуту data-inputmask .