动态更改 Kendo 数字文本框的字体颜色

Question

我正在使用 Kendo 数字文本框来显示小数点 values.I 想要根据用户更改字体颜色 input.How 来实现吗？

Answer 1

您可以在 JQuery 中通过更改输入的更改和旋转事件的样式轻松地做到这一点：

在您的数字文本框中添加事件：

 $("#numerictextbox").kendoNumericTextBox(
    {
        change: onChangeOrSpin,
        spin: onChangeOrSpin
   });

然后在事件处理函数中调用：

  function onChangeOrSpin() 
  {
       var val = this.value();
        changeFontColour(val);
  } 

  function changeFontColour(val)
    {
        if(val < 5)
        {
            $("#numerictextbox, .k-input").css('font-family','Arial');
            $("#numerictextbox, .k-input").css('font-style','italic');
            $("#numerictextbox, .k-input").css('font-weight','bold');
            $("#numerictextbox, .k-input").css('color','blue');
        }
        else
        {
              $("#numerictextbox, .k-input").css('font-family','Times New Roman');
            $("#numerictextbox, .k-input").css('font-style','normal');
           $("#numerictextbox, .k-input").css('font-weight','normal');
            $("#numerictextbox, .k-input").css('color','black');

        }
    }

这是一个有效的 fiddle：http://jsfiddle.net/loanburger/nwsw4yeq/

更新：

对于同一页面上的多个数字输入，请使用 classes 并向每个输入添加不同的 class，以便在需要更改颜色时区分它们。然后使用数据属性找到正确的属性进行更改。

您不能使用 id，因为 kendo 创建小部件的方式分为两部分：

第一部分是编辑值的输入。这是一个用户与之交互。此输入将被赋予 class： numerictextbox numericOne k-input
还有第二个感兴趣的输入，它用于在小部件失去焦点后显示值，这个输入获得 classes：k-formatted-value numerictextbox numericOne k-input

这些输入都没有 ID，您也不想使用原生 Kendo classes，所以在每个数字小部件控件上使用不同的 class ，您可以确定要更改的颜色，因为 class 将添加到小部件的两个输入中。

看这里：https://jsfiddle.net/loanburger/4evy3tcg/

动态更改 Kendo 数字文本框的字体颜色

Dyanamically change the font color of Kendo Numeric textbox

kendo-ui

kendonumerictextbox