JSFiddle - React, Tailwind, and code Playground

by arame3333

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<p>
no input mask:
<input data-bind="inputmask: Name" />
</p>
<p>
input mask:
<input data-bind="inputmaskvatreg: VatRegistrationNumber" class="vatreg" />
</p>
</br>
<p>
  input mask value: <span data-bind="text: VatRegistrationNumber"></span>
</p>

<br>
update the value <input data-bind="value: VatRegistrationNumber" class="vatreg" />

JavaScript

ko.bindingHandlers.inputmaskvatreg = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    $(element).inputmask("999-9999-99", {
      "oncomplete": function() {
        valueAccessor()($(element).val());
      }
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $(element).inputmask("destroy");
    });

  },
  //update the control when the view model changes
  update: function(element, valueAccessor, allBindingsAccessor) {
    //var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).val(valueAccessor()());
  }
};



function model() {
  var self = this;
  this.VatRegistrationNumber = ko.observable('888-8888-88');

}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);

});