3

我正在使用 Kendo 数字文本框来显示十进制值。我想根据用户输入更改字体颜色。如何实现这一点?

4

1 回答 1

2

您可以通过更改输入的 change 和 spin 事件的样式轻松地在 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');

        }
    }

这是一个工作小提琴:http: //jsfiddle.net/loangburger/nwsw4yeq/

更新:

对于同一页面上的多个数字输入,请使用类并为每个输入添加不同的类,以便您可以区分何时需要更改颜色。然后使用数据属性找到要更改的正确属性。

您不能使用 id,因为 kendo 创建小部件的方式有两个部分:

  1. 第一部分是用于编辑值的输入。这是用户与之交互的那个。这个输入将被赋予类: numerictextbox numericOne k-input
  2. 还有第二个感兴趣的输入,用于在小部件失去焦点后显示值,这个输入获得类:k-formatted-value numerictextbox numericOne k-input

这些输入都没有 id 并且您也不想使用本机 Kendo 类,因此在每个数字小部件控件上使用不同的类,您可以确定要更改的颜色,因为该类将添加到两个输入中小部件。

见这里:https ://jsfiddle.net/loangburger/4evy3tcg/

于 2015-02-11T22:41:45.950 回答