Mask that doesn't sync the value with knockoutJS

Question

I need a input mask that doesn't sync with knockoutJS observable variables.

Ex: if the user input is 50000000, the UI should show the masked value (500,000.00) but in the ViewModel (knockoutJS) variable it should save like 500000.00

I tried with 3 following jQuery plugins

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

Even tried with the knockoutJS integration of RobinHerbots input mask plugin.

All those plugins were working perfectly but the problem is, When user input the value 50000000, it shows as 500,000.00 but it has been saved to the knockoutJS observable variable the same value (500,000.00).

Do anyone facing a problem like this?

---

Update:

I have modified some code in RobinHerbots input mask (knockout integration) and now I'm removing all commas from the input string when the value is updating. [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'}" />

Now it works as I needed. Anyone knows how to get the currency (It doesn't work the way we used to do with jQuery) mask in the RobinHerbots input mask in knockout version?

Answer 1

You can create a knockout extension for masking with markup like

<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
 })
}

}

Answer 2

I have also faced similar difficulties in using the masks. I prefer to keep a computed variable that cleans up the input value. See the snippet below:

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>