knockout custom numeric binding

Question

I wanted to use this technique: make an input only-numeric type on knockout

to allow user to enter only numbers.

However, this technique doesn't update observable value on UI.

HTML:

 <span data-bind="text: Interval" ></span>
 <input data-bind="numeric: Interval" />

Binding:

ko.bindingHandlers.numeric = {
    init: function (element, valueAccessor) {
        $(element).on("keydown", function (event) {
            // Allow: backspace, delete, tab, escape, and enter
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                // Allow: Ctrl+A
                (event.keyCode == 65 && event.ctrlKey === true) ||
                // Allow: . ,
                (event.keyCode == 188 || event.keyCode == 190 || event.keyCode == 110) ||
                // Allow: home, end, left, right
                (event.keyCode >= 35 && event.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
            }
            else {
                // Ensure that it is a number and stop the keypress
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        });
    }    
};

So, binding doesn't allow to enter characters other than numbers, but when focus is lost on input, corresponding observable is not updating (so span elements is not changing).

NOTE:

I do not need to allow user to enter non numeric characters into input. I know there are other solution like ko numeric extension that converts everything into numerics, but I do not need this. I need a solution that allows to enter only digits (including something like backspace etc.).

Can you create a working fiddle displaying the problem? – PW Kad Feb 24 '14 at 18:14 — PW Kad, Feb 24 '14 at 18:14
you forgot to include - for negative numbers – Joe Heyming Apr 29 '15 at 18:10 — Joe Heyming, Apr 29 '15 at 18:10

score 17 · Accepted Answer · answered Feb 24 '14 at 23:12

17

This will do what you want:

<span data-bind="text: Interval" ></span>
<input data-bind="numeric, value: Interval" />

http://jsfiddle.net/mbest/n4z8Q/

answered Feb 24 '14 at 23:12

Michael Best

16,623
1
37
70

David East · Answer 2 · 2014-02-24T21:47:29.903

A solid route for numeric only numbers would be to user an extender.

We don't have to track the keypress. It is easier to just subscribe to the observable to intercept the value before it updates. We can then do some regex that allows us to evaluate whether the input is a number or not. If the input is not a number, we will strip out the non-numeric characters. Thus allowing no non-numeric input.

FIDDLE:

HTML

<input type="text" data-bind="value: myNum, valueUpdate: 'afterkeyup'" />

JS

(function(ko) {

    ko.observable.fn.numeric = function () {
        // the observable we are extending
        var target = this;

        // subscribe to the observable so we can
        // intercept the value and do our custom
        // processing. 
        this.subscribe(function() {
           var value = target();
           // this will strip out any non numeric characters
           target(value.replace(/[^0-9]+/g,'')); //[^0-9\.]/g - allows decimals
        }, this);

        return target;
    };

    function ViewModel() {
        this.myNum = ko.observable().numeric();
    };

    ko.applyBindings(new ViewModel());

})(ko);

Love this approach. Great solution. – pim May 12 '16 at 17:44 — pim, May 12 '16 at 17:44

score 2 · Answer 3 · answered Feb 24 '14 at 19:24

2

I would suggest you make a wrapper around http://numeraljs.com/. You would just hook up the settings and on update you would call format on the input.

answered Feb 24 '14 at 19:24

Matthew

411
4
14

`ko.bindingHandlers.number = { init: function (element, valueAccessor) { }, // , viewModel, bindingContext update: function (element, valueAccessor, allBindingsAccessor) { // First get the latest data that we're bound to var value = valueAccessor(); // Next, whether or not the supplied model property is observable, get its current value var newValueAccessor = ko.unwrap(value); var format = allBindingsAccessor.get('format') || '0,0'; $(element).text(numeral(newValueAccessor).format(format)); } };` – petrosmm May 18 '18 at 13:33

Maxim · Answer 4 · 2014-06-25T18:48:38.123

It is my fixed version considering all above but working as real value binding and supporting non-observable objects as source/target.

EDIT:Minified version of knockout does not expose writeValueToProperty function and twoWayBindings. So we should clone writeValueToProperty and use _twoWayBindings. I updated code to support minified version of knockout.

ko.expressionRewriting._twoWayBindings.numericValue = true;
ko.expressionRewriting.writeValueToProperty = function (property, allBindings, key, value, checkIfDifferent) {
    if (!property || !ko.isObservable(property)) {
        var propWriters = allBindings.get('_ko_property_writers');
        if (propWriters && propWriters[key])
            propWriters[key](value);
    } else if (ko.isWriteableObservable(property) && (!checkIfDifferent || property.peek() !== value)) {
        property(value);
    }
};
ko.bindingHandlers.numericValue = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $(element).on("keydown", function (event) {
            // Allow: backspace, delete, tab, escape, and enter.
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                // Allow: Ctrl+A
                (event.keyCode == 65 && event.ctrlKey === true) ||
                // Allow: . ,
                (event.keyCode == 188 || event.keyCode == 190 || event.keyCode == 110) ||
                // Allow: home, end, left, right.
                (event.keyCode >= 35 && event.keyCode <= 39)) {
                // Let it happen, don't do anything.
                return;
            }
            else {
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        });

        var underlying = valueAccessor();
        var interceptor = ko.dependentObservable({
            read: function () {
                if (ko.isObservable(underlying) == false) {
                    return underlying;
                } else {
                    return underlying();
                }
            },
            write: function (value) {
                if (ko.isObservable(underlying) == false) {
                    if (!isNaN(value)) {
                        var parsed = parseFloat(value);
                        ko.expressionRewriting.writeValueToProperty(underlying, allBindingsAccessor, 'numericValue', !isNaN(parsed) ? parsed : null);
                    }
                } else {
                    if (!isNaN(value)) {
                        var parsed = parseFloat(value);
                        underlying(!isNaN(parsed) ? parsed : null);
                    }
                }
            }
        });
        ko.bindingHandlers.value.init(element, function () { return interceptor; }, allBindingsAccessor, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    }
}

score 1 · Answer 5 · answered Jan 23 '14 at 12:03

Indeed, this does not update your observable. The custom binding is incomplete. It seems to me this is just intended as an example of the idea, not a working solution.

However, in the question you linked, there's actually a better approach somewhere in the comments. It is to use a Knockout extender. See Live Example 1 on http://knockoutjs.com/documentation/extenders.html

There's a few reasons it's better: 1. More robust. For example, you could still paste a string of text from the clipboard in your solution. 2. More user-friendly. Your solution plainly disables a bunch of keys. This is not user friendly at all. The solution proposed by Knockout just ensures the ultimate value is a correct one. 3. Better code separation and maintainability: your HTML can just contain a plain ol' value binding. Once a requirement rises that the value should be numerical, you just extend the observable in your viewmodel. The only change you make is in the JavaScript, as it should be, since it's functionality, not presentation. The change also stands on itself, and it's very clear what the extender does to anyone that might be using the observable in calculations or w/e.

I have seen this example, but in my case I really do not need to allow entering other values just numbers. So, such an extender doesn't fit my needs. — renathy, Jan 23 '14 at 15:18

score 1 · Answer 6 · answered Mar 03 '14 at 18:12

I need a solution that allows to enter only digits (including something like backspace etc.).

Check this jquery plugin: http://www.texotela.co.uk/code/jquery/numeric/

it allows decimal separator, you may want to fork it in order to allow other chars like backspace

score 0 · Answer 7 · answered Feb 26 '14 at 10:53

You can improve your binding handler to support modification of valueAccessor

Binding:

ko.bindingHandlers.numeric = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        $(element).on("keydown", function (event) {
            // Allow: backspace, delete, tab, escape, and enter
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                // Allow: Ctrl+A
                (event.keyCode == 65 && event.ctrlKey === true) ||
                // Allow: . ,
                (event.keyCode == 188 || event.keyCode == 190 || event.keyCode == 110) ||
                // Allow: home, end, left, right
                (event.keyCode >= 35 && event.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
            }
            else {
                // Ensure that it is a number and stop the keypress
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        });

        $(element).change(function () {
            value($(element).val());
        });
    }    
};

In this case HTML will be

<span data-bind="text: Interval" ></span>
<input data-bind="numeric: Interval" />

FIDDLE

knockout custom numeric binding

7 Answers7