Маска, которая не синхронизирует значение с knockoutJS

Мне нужна маска ввода, которая не синхронизируется с наблюдаемыми переменными knockoutJS.

Пример: если пользовательский ввод 50000000, пользовательский интерфейс должен отображать замаскированное значение (500000.00), но в переменной ViewModel (knockoutJS) оно должно сохраняться как 500000.00

Я пробовал с 3 следующими плагинами jQuery

  1. github.com/RobinHerbots/Inputmask
  2. github.com/igorescobar/jQuery-Mask-Plugin
  3. digitalbush.com/projects/masked-input-plugin/

Даже пробовал с интеграцией knockoutJS плагина маски ввода RobinHerbots.

Все эти плагины работали отлично, но проблема в том, что когда пользователь вводит значение 50000000, оно отображается как 500000.00, но оно было сохранено в наблюдаемой переменной knockoutJS с тем же значением (500000.00).

Кто-нибудь сталкивался с такой проблемой?

Обновление:

Я изменил код в маске ввода RobinHerbots (интеграция с нокаутом), и теперь я удаляю все запятые из входной строки, когда значение обновляется. [JAVASCRIPT]

  ko.bindingHandlers.inputmask = {
    init: function (element, valueAccessor, allBindingsAccessor) {
      var mask = valueAccessor();
      var observable = mask.value;
      if (ko.isObservable(observable)) {
        $(element).on('focusout change', function () {
          if ($(element).inputmask('isComplete')) {
            observable($(element).val());
          } else {
            observable(null);
          }
        });
      }
      $(element).inputmask(mask);
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
      var mask = valueAccessor();
      var observable = mask.value;
      if (ko.isObservable(observable)) {
        var valuetoWrite = observable();
        $(element).val(valuetoWrite);
        var value = valuetoWrite.toString().replace(/,/g ,'');
        observable(value);
      }
    }

[HTML]

<input type="text" data-bind="inputmask: { value:ItemPrice , mask:'999,999.99'}" />

Теперь работает так, как мне нужно. Кто-нибудь знает, как получить маску валюты (она не работает так, как мы делали с jQuery) в маске ввода RobinHerbots в нокаутной версии?


javascript jquery knockout.js jquery-inputmask
person Kasun    schedule 27.09.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете создать расширение для маскировки с разметкой, например

<input type="text" data-bind="customMasking:{}"/> 

ko.bindingHandlers.customMasking={
init:function(element,valueaccessor,allbindingaccessor){
var el =$(element);
var options=allbindingaccessor();
el.inputmask({
//provide your options
 })
}

}

person user398707    schedule 27.09.2017
comment
Спасибо за ответ. Я уже придумал аналогичное решение (см. OP). Если вам известно о получении маски валюты в нокаутной версии маски ввода RobinHerbots, пожалуйста, поделитесь ею. - person Kasun; 27.09.2017
comment
Вы можете передать параметр как $ (# currency) .inputmask ({маска: '$ [9] [9] [9] [9] [9] [9] [9] [9] 9,99 », numericInput: true, placeholder» : '0', жадный: false}) - person user398707; 27.09.2017
comment
у вас может быть вид jsfiddle jsfiddle.net/roshan1783/5vat7ygx/#w&to Generaljs=ru > - person user398707; 27.09.2017

arrow_upward
0
arrow_downward

Я также столкнулся с аналогичными трудностями при использовании масок. Я предпочитаю сохранить вычисляемую переменную, которая очищает входное значение. См. Фрагмент ниже:

var model = function() {
  var self = this;
  self.number = ko.observable('0');
  
  self.floatNumber = ko.computed(function() {
    return self.number().split(',').join('');
  });
}

ko.applyBindings(new model());

$("#test").inputmask({ alias : "currency", prefix: '' });
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="text" id="test" data-bind="textInput: number" />

<br />
Cleaned Number: 
<span data-bind="text: floatNumber" ></span>

person Nisarg    schedule 27.09.2017