Динамическое изменение цвета шрифта в текстовом поле Kendo Numeric

Я использую текстовое поле Kendo Numeric для отображения десятичных значений. Я хочу изменить цвет шрифта на основе пользовательского ввода. Как этого добиться?


person Rajesh N Rajendran    schedule 11.02.2015    source источник


Ответы (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. Первая часть — это ввод для редактирования значения. Это тот, с которым взаимодействует пользователь. Этому входу будет присвоен класс: numerictextbox numericOne k-input
  2. Существует второй интересующий вход, который используется для отображения значения после того, как виджет теряет фокус, этот получает классы: k-formatted-value numerictextbox numericOne k-input

Ни один из этих входов не получает идентификатор, и вы также не хотите использовать собственные классы кендо, поэтому, используя отдельный класс для каждого из ваших числовых элементов управления виджетами, вы можете определить, какие цвета нужно изменить, поскольку этот класс будет добавлен к обоим входам в виджет.

См. здесь: https://jsfiddle.net/loanburger/4evy3tcg/

person loan.burger    schedule 11.02.2015