0

I was looking at make an input only-numeric type on knockout. The accepted answer works fine but how can a more than one decimal point (like 4.4.4) be prevented from being entered (or how can a second decimal point be prevented)?

the code goes like this:

<input id="text" type="text" data-bind="numeric, value: number">

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();
            }
        }
    });
}
};
Community
  • 1
  • 1
John Dow
  • 177
  • 3
  • 14
  • This will help: http://stackoverflow.com/questions/39394445/number-input-box-in-knockout-js – Rajesh May 16 '17 at 09:06
  • Hi Rajesh, in the accepted answer i cant enter a number with a decimal point – John Dow May 16 '17 at 09:35
  • You can try something like this: [Fiddle](https://jsfiddle.net/RajeshDixit/w5dh36jv/8/). Note this is not the complete solution. If you can formulate a proper pattern, you use this solution. Else, you can even try approaches in my question. They work fine, just they'll add another round of processing. – Rajesh May 16 '17 at 09:50
  • Is there a reason you can't use the [numeric extender](http://knockoutjs.com/documentation/extenders.html#live-example-1-forcing-input-to-be-numeric)? – user3297291 May 16 '17 at 11:40
  • @user3297291 numeric extender is useful but it doesn't prevent undesirable values being placed in the input ... – John Dow May 17 '17 at 02:05

1 Answers1

0

The custom binding does not look good for me. I'd recommend just using Knockout Validation, which proved a great plugin in my workflow with knockout. The syntax is easy: ko.observable(...).extend({ number: true }). You may also add min/max validation: .extend({ number: true, min: 0, max: 100 }) // percentage and the plugin allows to add css classes to invalid elements.

See example below. It does just what you want.

function viewModel() {
  this.number = ko.observable(0).extend({ number: true });
}

ko.applyBindings(new viewModel(), document.body);
<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://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>

<input data-bind="textinput: number" />
SVSchmidt
  • 6,269
  • 2
  • 26
  • 37
  • 1
    @ SVSchmidt the validation is good but is there a way to prevent letters, special characters (except ".") and things like 5.4.3 from being entered on the input? – John Dow May 16 '17 at 09:33
  • @simba Meek: ko.validation has some options https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Configuration but I'm afraid you can't actually limit the entered characters. But is that necessary? I always think, let the user input whatever he wants, as long as you tell him he's stupid. ko.validatiln lets you check if a observable is valid (`.isValid ()`), and you may react properly. – SVSchmidt May 16 '17 at 19:47