make an input only-numeric type on knockout

by

Is better to create custom binding http://knockoutjs.com/documentation/custom-bindings.html which accept only allowed characters [0-9,.] as numeric representation.

put this line into your view

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

put this line into your model (remember to bind number as observable property)

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();
                }
            }
        });
    }
};

More Related Contents:

  1. Binding true / false to radio buttons in Knockout JS
  2. Difference between knockout View Models declared as object literals vs functions
  3. Resolve circular references from JSON object
  4. How to create an auto-complete combobox?
  5. Knockout.js incredibly slow under semi-large datasets
  6. Change observable but don’t notify subscribers in knockout.js
  7. knockout data-bind on dynamically generated elements
  8. Setting value of Observable not updating in Knockout
  9. How to clear/remove observable bindings in Knockout.js?
  10. Knockout + Bootstrap 3 Radio Buttons
  11. When to use ko.utils.unwrapObservable?
  12. combine dynamic and static classes through css binding, knockout.js
  13. Knockout JS – How to correctly bind an observableArray
  14. Javascript Equivalent to C# LINQ Select
  15. knockout.js using $index with if binding
  16. Knockout JS mapping plugin without initial data / empty form
  17. Unescape HTML entities in JavaScript?
  18. Check if an element contains a class in JavaScript?
  19. Why can I access TypeScript private members when I shouldn’t be able to?
  20. How to pass parameter to function using in addEventListener?
  21. How can I access the dom tree of child window?
  22. document.getElementsByClassName().innerHTML always returns “undefined”
  23. SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ – Gulp
  24. What is the decimal separator symbol in JavaScript?
  25. A good way to redirect with a POST request?
  26. HTML Input type number Thousand separator
  27. opening Outlook through javascript
  28. Confirmation dialog on ng-click – AngularJS
  29. CSS Transition doesn’t work with top, bottom, left, right
  30. Pass element ID to Javascript function

Leave a Comment