2

我正在使用 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/

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

4

1 回答 1

0

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

这是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/中的示例

于 2014-05-06T18:23:23.107 回答