javascript - 如何在 Kendo UI numericTextBox 中保留尾随零？

Question

我正在尝试使用 Kendo UI 构建一个数字输入小部件。我能够设置格式，以便在字段没有焦点时不 chop 尾随零，但当字段确实有焦点时，尾随零消失。

我在 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>

此示例在获得焦点之前在输入框中显示“17.00000”，在获得焦点之后显示“17”。

Answer 1

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

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您的示例已修改。