如何通過回滾Kendo UI中的上一個有效值來撤消輸入值

Question

我有一個輸入組件，如下所示：

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

我的期望：

1. 輸入介於50和100之間的數字，例如70；
2. 關注其他組件，然后再關注此輸入；
3. 輸入一個小於50或大於100的數字，例如20；
4. 關注其他組成部分
5. 我希望該框回滾到70，而不是填充50（即min屬性）。

謝謝您的幫助

Answer 1

您可以執行以下操作：

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

基本上，您會攔截focusin事件並保存以前的值，而在focusout檢查是否在限制范圍內，如果不是，則還原舊的保存值。

編輯如果您需要對頁面中的許多輸入字段執行相同的操作，則可以執行以下操作：

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

看到它在這里運行： http : //jsfiddle.net/OnaBai/yYX7m

Answer 2

KendoNumericTextBox對象中有一個名為“ _old”的字段。 這對於此目的很有用，至少在處理NumericTextBoxSpinEvent時有效。 ：

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