如何通过回滚Kendo UI中的上一个有效值来撤消输入值

Question

I have an input component as the following:

<input type="number" value="0" name="weight" format="0" min="50" max="100">

What I expect:

1. input a number between 50 and 100, for example 70;
2. focus other component then focus back on this input;
3. input a number which is lower than 50 or greater than 100, for example 20;
4. focus other component
5. I expect the box rolling back to 70 instead of populating 50, the min attribute.

Thank you for your help

Answer 1

You can do something like:

var ntb = $("#num").kendoNumericTextBox({
    min : 50,
    max : 100
}).data("kendoNumericTextBox");

var oldvalue = undefined;
$("#num").on("focusin", function(e) {
    oldvalue = $("#num").val();
});

$("#num").on("focusout", function(e) {
    var value = $("#num").val();
    if (value < ntb.options.min || value > ntb.options.max) {
        $("#num").val(oldvalue);
    }
});

Basically you intercept the focusin event and save previous value and in focusout you check that are inside the limits, if not, you restore the old saved value.

EDIT If you need to do the same for many input fields in the page, what you can do is:

// Save old value in the numeric text box by adding an oldvalue property to it
$("[data-role='numerictextbox']").on("focusin", function(e) {
    var me = $(this).data("kendoNumericTextBox");
    me.oldvalue = $(this).val();
});

// Restore saved old value if value is not in range
$("[data-role='numerictextbox']").on("focusout", function(e) {
    var value = $(this).val();
    var me = $(this).data("kendoNumericTextBox");
    if (value < me.options.min || value > me.options.max) {
        $(this).val(me.oldvalue);
    }
});

See it running here : http://jsfiddle.net/OnaBai/yYX7m

Answer 2

There is a field named "_old" in the KendoNumericTextBox object; this is useful for this purpose, at least when handling a NumericTextBoxSpinEvent, viz. :

function spinEventHandler(e) {
    alert("delta from spin is: " + (+e.sender._value - e.sender._old));
}