3

10 進数値を表示するために Kendo Numeric テキスト ボックスを使用しています。ユーザー入力に基づいてフォントの色を変更したいです。これを実現するにはどうすればよいですか?

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/loanburger/nwsw4yeq/

アップデート：

同じページに複数の数値入力がある場合は、クラスを使用し、各入力に異なるクラスを追加して、色を変更する必要があるときに区別できるようにします。次に、データ属性を使用して、変更する正しい属性を見つけます。

kendo がウィジェットを作成する方法には 2 つの部分があるため、id を使用することはできません。

  1. 最初の部分は、値を編集するための入力です。これは、ユーザーが操作するものです。この入力には次のクラスが与えられます。 numerictextbox numericOne k-input
  2. ウィジェットがフォーカスを失った後に値を表示するために使用される 2 番目の興味深い入力があります。これはクラスを取得します。k-formatted-value numerictextbox numericOne k-input

これらの入力はどちらも ID を取得せず、ネイティブの Kendo クラスも使用したくないため、各数値ウィジェット コントロールで個別のクラスを使用すると、変更する色を識別できます。そのクラスは両方の入力に追加されるためです。ウィジェット。

こちらをご覧ください: https://jsfiddle.net/loanburger/4evy3tcg/

于 2015-02-11T22:41:45.950 に答える