Number Input Box - Knockout

by Rajesh Dixit

HTML

<div>
  <input type="text" data-bind="myPatternBinding: num" data-pattern="[^0-9]" data-flag="gi">
  <span data-bind="text: num"></span>
</div>

JavaScript

var onEvent = function(event, handler) {
  ko.utils.registerEventHandler(element, event, handler);
};

var bindingName = 'myPatternBinding';

ko.bindingHandlers[bindingName] = {
  'init': function(element, valueAccessor, allBindings) {
  
    var parseVersion = function(matches) {
      if (matches) {
        return parseFloat(matches[1]);
      }
    };
    var operaVersion = window.opera && window.opera.version && parseInt(window.opera.version()),
      userAgent = window.navigator.userAgent,
      safariVersion = parseVersion(userAgent.match(/^(?:(?!chrome).)*version\/([^ ]*) safari/i)),
      firefoxVersion = parseVersion(userAgent.match(/Firefox\/([^ ]*)/));

    var previousElementValue = element.value,
      timeoutHandle,
      elementValueBeforeEvent,
      //nonNumericReg = /[^0-9]/g
      flag = element.getAttribute("data-flag"),
      pattern = new RegExp(element.getAttribute("data-pattern"), flag);

    var updateModel = function(event) {
      clearTimeout(timeoutHandle);
      elementValueBeforeEvent = timeoutHandle = undefined;

      var elementValue = element.value.replace(pattern, '');
      console.log(elementValue, pattern)
      if (previousElementValue !== elementValue) {
        previousElementValue = elementValue;
       	ko.expressionRewriting.writeValueToProperty(valueAccessor(), allBindings, bindingName, elementValue);
      }
      updateView();
    };

    var deferUpdateModel = function(event) {
      if (!timeoutHandle) {
        elementValueBeforeEvent = element.value.replace(nonNumericReg, '');
        timeoutHandle = ko.utils.setTimeout(updateModel, 4);
      }
    };

    var ieUpdateModel = ko.utils.ieVersion == 9 ? deferUpdateModel : updateModel;

    var updateView = function() {
    	// check if new character is non numeric.
      // if yes, replace it and return. Don't process it.
    	if(pattern.test(element.value)){
      	element.value = element.value.replace(pattern, '');
        return;
      }
      var modelValue =...