javascript - 在 Kendo UI 数字输入中提供百分比数量

Question

我如何才能在 Kendo UI 数字文本框中输入百分比值，以便我输入的值被视为百分比？例如，如果您在文本框中输入 5，则写入的基础值为 5，实际上是 500%。我想要的是将 5 作为 5%，将基础值写为 .05。

我担心的是我将指示用户在该字段中输入百分比。

HTML:

My percentage: <input id="percentage" value="0.05" />

JavaScript:

$("#percentage").kendoNumericTextBox({
    format: "p0",
    step: 0.01
});

在这里查看 jsfiddle:http://jsfiddle.net/zNLNy/844/

Answer 1

问题是您告诉数字文本框使用“p0”格式。然后它希望用户输入小数形式的百分比。这是它的正常行为。相反，对于您正在尝试做的事情，您想告诉数字文本框使用整数格式，但以十进制形式存储值。

JsFiddle:http://jsfiddle.net/43Mjx/2/

HTML:

<div>
    <label>Enter percentage:</label>
    <input data-role="numerictextbox" data-format="d" data-bind="value: percentage, events: { change: onChange }" />
    <br/>
    <label>Value:</label> <span data-bind="text: percentageAsDecimal"></span>
</div>

JavaScript:

var model = kendo.observable({
    percentage: 5,
    percentageAsDecimal: 0.05,
    onChange: function () {
        this.set('percentageAsDecimal', this.get('percentage') / 100);
    }
});

kendo.bind($('div'), model);