如何在Kendo UI numericTextBox中保留尾随零?

时间:2016-03-02 22:01:44

标签: javascript kendo-ui

我正在尝试使用Kendo UI构建数字输入窗口小部件。我可以设置格式,以便在字段没有焦点时不截断尾随零,但是当字段确实有焦点时,尾随零消失。

我在http://dojo.telerik.com/eBevU有一个例子,相关位列在下面:

<div id="add-product" class="demo-section k-content">
  <ul id="fieldlist">
    <li>
      <label for="numeric">Input</label>
      <input id="numeric" type="number" value="17" min="0" max="100" step="1" style="width: 100%;" />
    </li>
  </ul>
</div>

<script>
  $(document).ready(function() {
    // create NumericTextBox from input HTML element
    $("#numeric").kendoNumericTextBox({
      format: "n5",
      decimals: 5
    });
  });
</script>

此示例显示&#34; 17.00000&#34;在它有焦点之前的输入框中,&#34; 17&#34;后。

2 个答案:

答案 0 :(得分:2)

我找到的唯一解决方案是使用窗口小部件配置中指定的格式基本重建值,即添加小数分隔符(如果需要)和缺少的尾随零。将下面的函数绑定到输入的焦点事件。

function () {
    var input = $(this);
    var widget = input.data("kendoNumericTextBox");

    setTimeout(function () {
        if (widget !== undefined && input.val() !== "") {
          var format = widget._format(widget.options.format);
          var decimals = widget.options.decimals;

          if (decimals > 0) {
              var inputValue = input.val();
              var digits = inputValue.split(format["."]);

              if (digits.length == 1)
                  inputValue = inputValue + format["."];

              var l = digits[0].length + 1 + decimals;
              while (inputValue.length < l)
                  inputValue = inputValue + "0";

              input.val(inputValue);
            }
        }  
    }
}

您可以找到here您修改的示例。

答案 1 :(得分:0)

唯一的方法(我经历过)kendo将在聚焦时保留小数位,如果数字已经具有指定精度的值,否则它将删除它们。您可以尝试修改该步骤,以便用户可以按较小的数量增加该值。

$("#numeric").kendoNumericTextBox({
     format: "n5",
     decimals: 5,
     step: 0.00001
});
祝你好运。