html - 剑道击倒 : NumericTextBox show validation message on inserting more than max value

Question

我正在使用 kendo-knockout 库。我有一个最大值为 20 的数字文本框小部件。如果您输入更大的值，小部件会将其四舍五入为最大值。因此，如果您使用键盘输入值 50 并从输入中失去焦点或保存表单，该值将四舍五入为最大值 20。

我希望当您在小部件文本框中输入更大的值时显示一条错误消息。考虑到这一点，我更改了配置:

<input type="number"  
data-bind="kendoNumericTextBox: { value: price, min="1", max="20" }" />

到

<input type="number"  min="1" max="20"
data-bind="kendoNumericTextBox: { value: price }" />

但是最后的结果是一样的。该值是四舍五入的。如果我删除小部件:

<input type="number"  min="1" max="20" />

我得到了想要的行为。这可以使用数字文本框小部件来完成吗？

这是 jsfiddle:

http://jsfiddle.net/2Qnv7/29/

为了澄清，我添加了没有小部件的所需行为。谢谢

Answer 1

您可以在更改时绑定(bind)事件，但 Kendo 不会发送无效值，因此您必须进行一些额外的黑客攻击以存储键入的值(例如通过绑定(bind)模糊事件)，然后比较存储的值和限制。

这里是HTML

Kendo numeric text box:
<input type="number"  min="1" max="20"
data-bind="event: { blur: blur } ,kendoNumericTextBox: { value: price, change: change }" />

Regular Input:
<input type="number"  min="1" max="20" />

    <button type="submit">Submit</button>

</form>    

KO javascript 模型

var ViewModel = function() {
   this.price = ko.observable(11);
    this.blur = function(model, event) {
        $(event.target).data({ _prevValue: event.target.value });
    }
    this.change = function() {
        var _prevValue  = $(this.element).data('_prevValue') - 0;
        if (_prevValue > this.options.max || _prevValue < this._value) {
            alert(_prevValue + ' is out of range');
        }
    }
};

ko.applyBindings(new ViewModel());

您还可以将值存储到 this 的属性中，而不是存储到 jQuery 数据中。

这里是jsfiddle中的例子 http://jsfiddle.net/Z8yq5/