How can I implement numeric text box in knockout.js?

Question

This is very good sample, but using another framework (KendoUI): http://demos.kendoui.com/web/numerictextbox/index.html

How can I implement it without another framework (only knockout.js+jquery)

EDIT:

I have to prevent non-numeric character entrance.

score 4 · Accepted Answer · edited May 23 '17 at 12:23

4

I would start by taking a look at the documentation on extenders, where there's an example similar to what you're looking for:

http://knockoutjs.com/documentation/extenders.html

You may also want to take a look at the documentation on custom bindings:

http://knockoutjs.com/documentation/custom-bindings.html

UPDATE take a look at this post: https://stackoverflow.com/a/891749/418613

that might be the easiest way to restrict input to numbers only

edited May 23 '17 at 12:23

Community

1
1

answered Jul 30 '12 at 03:35

jimmym715

1,512
1
16
25

First solution is not enough (I've edited question), I will try to implement second one. – Oguz Karadenizli Jul 30 '12 at 07:13

score 1 · Answer 2 · answered Nov 16 '13 at 05:22

This is a simple trick... you have 2 inputs: one with the value unformatted (observable) and the other one with the value formatted (compute?). make visible the one with the value formatted and the other hidden and on an event (click) change it, and viceversa on lost focus change the inputs.

Here is the source code of Kendo: Formatted(visible):

<input type="text" class="k-formatted-value k-input" tabindex="0" aria-disabled="false" aria-readonly="false" style="display: inline-block;">

Unformatted(hidden):

<input id="currency" type="text" value="30" min="0" max="100" data-role="numerictextbox" role="spinbutton" class="k-input" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" aria-disabled="false" aria-readonly="false" style="display: none;"><span class="k-select">

How can I implement numeric text box in knockout.js?

2 Answers2