Dyanamically更改Kendo Numeric文本框的字體顏色

Question

我正在使用Kendo Numeric文本框來顯示十進制值。我想根據用戶輸入更改字體顏色。如何實現此目的？

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'); 

     } 
    } 

這裏是工作提琴：http://jsfiddle.net/loanburger/nwsw4yeq/

更新：

對於同一頁面上的多個數字輸入，請使用類併爲每個輸入添加一個不同的類，以便您可以區分何時需要更改顏色。然後使用數據屬性找到正確的一個來更改。

1. 第一部分是編輯值的輸入：

   ，因爲有兩個部分劍道是如何創建的窗口小部件不能使用id。這是用戶與之交互的 。該輸入將被給予類： numerictextbox numericOne k-input

2. 有這是所使用的窗口小部件失去聚焦這一個後顯示該值的一個的有興趣的第二輸入端得到的類：k-formatted-value numerictextbox numericOne k-input

這些都不輸入會得到一個id，並且您不想使用本機Kendo類，因此在每個數字控件控件上使用不同的類時，可以確定要更改哪些顏色，因爲該類將被添加到該控件的兩個輸入中。

請看這裏：https://jsfiddle.net/loanburger/4evy3tcg/