Question

我有一个输入组件如下：

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

我的期望：

输入介于50和100之间的数字，例如70;
关注其他组件，然后重点关注此输入;
输入小于50或大于100的数字，例如20;
关注其他组件
我希望该框能够回滚到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

有一个名为＆＃34; _old＆＃34;的字段在KendoNumericTextBox对象中;这对于此目的很有用，至少在处理NumericTextBoxSpinEvent时，即：

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

如何通过回滚Kendo UI中的先前有效值来撤消输入值

2 个答案: