Number input box in Knockout JS

Question

I'm trying to create a number input box which will accept numbers only.

My initial value approach was to replace value and set it again to itself.

Subscribe approach

function vm(){
  var self = this;
  self.num = ko.observable();
  self.num.subscribe(function(newValue){
    var numReg = /^[0-9]$/;
    var nonNumChar = /[^0-9]/g;
    if(!numReg.test(newValue)){
      self.num(newValue.toString().replace(nonNumChar, ''));
    }
  })
}

ko.applyBindings(new vm())

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

Now this approach works but will add another cycle of subscribe event, so I tried to use a custom binding so that I can return updated value only. New to it, I tried something but not sure how to do it. Following is my attempt but its not working. Its not even updating the observable.

Custom Binding attempt

ko.bindingHandlers.numeric_value = {
  update: function(element, valueAccessor, allBindingsAccessor) {
    console.log(element, valueAccessor, allBindingsAccessor())
    ko.bindingHandlers.value.update(element, function() {
      var value = ko.utils.unwrapObservable(valueAccessor());
      return value.replace(/[^0-9]/g, '')
    });
  },
};

function vm() {
  this.num = ko.observable(0);
  this.num.subscribe(function(n) {
    console.log(n);
  })
}

ko.applyBindings(new vm())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
  <input type="text" data-bind="number_value: num, valueUpdate:'keyup'">
  <span data-bind="text: num"></span>
</div>

So my question is, Can we do this using custom bindings and is it better approach than subscribe one?

Edit 1:

As per @user3297291's answer, ko.extenders looks more like a generic way for my subscribe approach. I'm looking for an approach (if possible in Knockout), which would clean value before it is set to observable.

I have taken reference from following articles:

Note: In the first example, they are using jQuery to set the value. I would like to avoid it and do it using knockout only

I think custom bindings will be a better alternative to subscribes because it is reusable so you can use it in other places of your application that require the same functionality. Have a look at this jsfiddle - jsfiddle.net/tdkhypnL/1 not sure if this is what you are after. — Theodoros Klikas
@klikas agree to your point. I'm planning to implement something similar to textInput but little tied up stuff. Will add answer later. Also, in your fiddle, characters are visible for fraction of second and for some cases(if 1 character is entered), character is retained. — Rajesh
you are correct, my solution isnt perfect but will try to fix it when i fond some time as it was a bit rushed just to illustrate the concept :) — Theodoros Klikas
@klikas I have added an answer. Not sure if its the best option but I guess should be improved and used. Hope it helps. — Rajesh

AldoRomo88 AldoRomo88 · Accepted Answer · 2016-09-13T18:19:09

I´m on favor of use extender as user3297291's aswer.

Extenders are a flexible way to format or validate observables, and more reusable.

Here is my implementation for numeric extender

//Extender

ko.extenders.numeric = function(target, options) {
  //create a writable computed observable to intercept writes to our observable
  var result = ko.pureComputed({
    read: target, //always return the original observables value
    write: function(newValue) {
      var newValueAsNum = options.decimals ? parseFloat(newValue) : parseInt(newValue);
      var valueToWrite = isNaN(newValueAsNum) ? options.defaultValue : newValueAsNum;
      target(valueToWrite);
    }
  }).extend({
    notify: 'always'
  });

  //initialize with current value to make sure it is rounded appropriately
  result(target());

  //return the new computed observable
  return result;
};

//View Model

var vm = {
  Product: ko.observable(),
  Price: ko.observable().extend({
    numeric: {
      decimals: 2,
      defaultValue: undefined
    }
  }),
  Quantity: ko.observable().extend({
    numeric: {
      decimals: 0,
      defaultValue: 0
    }
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Edit

I get your point, what about and regular expression custom binding to make it more reusable?

Something like this.

function regExReplace(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

  var observable = valueAccessor();
  var textToReplace = allBindingsAccessor().textToReplace || '';
  var pattern = allBindingsAccessor().pattern || '';
  var flags = allBindingsAccessor().flags;
  var text = ko.utils.unwrapObservable(valueAccessor());
  if (!text) return;
  var textReplaced = text.replace(new RegExp(pattern, flags), textToReplace);

  observable(textReplaced);
}

ko.bindingHandlers.regExReplace = {
  init: regExReplace,
  update: regExReplace
}


ko.applyBindings({
  name: ko.observable(),
  num: ko.observable()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>


<input type="text" data-bind="textInput : name, regExReplace:name, pattern:'(^[^a-zA-Z]*)|(\\W)',flags:'g'" placeholder="Enter a valid name" />
<span data-bind="text : name"></span>
<br/>
<input class=" form-control " type="text " data-bind="textInput : num, regExReplace:num, pattern: '[^0-9]',flags: 'g' " placeholder="Enter a number " />
<span data-bind="text : num"></span>

Number input box in Knockout JS

Subscribe approach

Custom Binding attempt

Edit 1:

4 Answers