Как изменить цвет кнопки при навигации клавишами вверх и вниз в 1С

← На главную

В процессе разработки интерфейсов на платформе «1С:Предприятие 8» часто возникает задача сделать навигацию более наглядной. По умолчанию платформа выделяет активную кнопку пунктирной рамкой в обычных формах или желтым контуром в управляемых формах. Однако стандартных событий вроде ПриПолученииФокуса у кнопок не существует. В этой статье мы подробно разберем, как обойти это ограничение и программно изменять цвет фона кнопки при перемещении по форме с помощью клавиатуры.

Способ 1. Использование обработчика ожидания

Проанализируем первый и самый очевидный способ — использование периодической проверки активного элемента формы. Поскольку платформа не сообщает нам в реальном времени, что фокус переместился на кнопку, мы заставим систему проверять это самостоятельно каждые 100 миллисекунд.

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

Разберем пример кода для управляемых форм:


&НаКлиенте
Перем ПоследнийАктивныйЭлемент;

&НаКлиенте
Процедура ПриОткрытии(Отказ)
    // Запускаем циклическую проверку с интервалом 0.1 секунды
    ПодключитьОбработчикОжидания("ПроверитьФокусКнопок", 0.1, Ложь);
КонецПроцедуры

&НаКлиенте
Процедура ПроверитьФокусКнопок()
    ТекущийЭлементФормы = ЭтаФорма.ТекущийЭлемент;
    
    // Если фокус не менялся, ничего не делаем для экономии ресурсов
    Если ТекущийЭлементФормы = ПоследнийАктивныйЭлемент Тогда
        Возврат;
    КонецЕсли;
    
    // Сбрасываем цвет для всех кнопок в стандартный (прозрачный или авто)
    ЦветОбычный = Новый Цвет(); 
    ЦветВыделения = WebЦвета.Оранжевый;
    
    // Перебираем нужные нам кнопки
    СписокКнопок = Новый Массив;
    СписокКнопок.Добавить("КнопкаКоманда1");
    СписокКнопок.Добавить("КнопкаКоманда2");
    
    Для Каждого ИмяКнопки Из СписокКнопок Цикл
        Элемент = Элементы[ИмяКнопки];
        Если Элемент = ТекущийЭлементФормы Тогда
            Элемент.ЦветФона = ЦветВыделения;
        Иначе
            Элемент.ЦветФона = ЦветОбычный;
        КонецЕсли;
    КонецЦикла;
    
    ПоследнийАктивныйЭлемент = ТекущийЭлементФормы;
КонецПроцедуры

Важный нюанс: в обычных формах (ОФ) вместо коллекции Элементы следует использовать ЭлементыФормы, а вместо свойства ЦветФона — ЦветФонаКнопки. Этот метод является рабочим «костылем», но имеет недостаток: небольшая задержка в 0.1 секунды и постоянное выполнение фонового кода.

Способ 2. Использование таблицы и условного оформления

Выясним, как сделать решение более профессиональным и производительным. Вместо обычных кнопок мы можем использовать элемент формы Таблица. Это позволяет задействовать мощный механизм УсловноеОформление и штатное событие ПриАктивизацииСтроки.

Рассмотрим по шагам, как это реализовать:

Создадим на форме реквизит с типом СписокЗначений или таблицу значений.
Выведем этот реквизит на форму в виде таблицы. Каждая строка в этой таблице будет имитировать нашу «кнопку».
В настройках таблицы отключим отображение заголовков, сетки и командной панели, чтобы она визуально выглядела как блок кнопок.
Настроим Условное оформление формы. Добавим правило: если Элементы.ИмяТаблицы.ТекущаяСтрока совпадает с идентификатором строки, устанавливаем цвет фона (например, оранжевый).

Преимущество этого метода в том, что событие ПриАктивизацииСтроки срабатывает мгновенно при нажатии стрелок «Вверх» или «Вниз», и платформа сама перерисовывает цвета без участия таймеров. Это значительно стабильнее и соответствует стандартам разработки 1С.

Способ 3. Поле HTML-документа для полной свободы дизайна

Если требования к дизайну очень высокие (нужна анимация, градиенты или изменение толщины рамок), проанализируем вариант с использованием Поля HTML-документа. В этом случае мы полностью уходим от стандартных кнопок 1С.

Разберем логику взаимодействия:

Внутри HTML-кода мы описываем кнопки с помощью тегов <button>. С помощью CSS мы можем задать стиль для псевдокласса :focus. Это позволит менять цвет кнопки мгновенно на уровне браузерного движка внутри 1С.


<style>
    .myButton { background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px; width: 100%; }
    .myButton:focus { background-color: orange; border: 2px solid red; outline: none; }
</style>

<button class="myButton" id="btn1" onclick="sendTo1C('Команда1')">Команда 1</button>
<button class="myButton" id="btn2" onclick="sendTo1C('Команда2')">Команда 2</button>

<script>
    function sendTo1C(cmd) {
        // Передача команды обратно в 1С
        window.external.OnClick(cmd);
    }
</script>

В самой 1С мы перехватываем нажатие через событие поля HTML ПриНажатии. Этот метод позволяет сделать кнопки любого цвета и формы, а рамка фокуса будет управляться CSS-правилом outline или border.

Способ 4. Переключатели (RadioButtons)

Посмотрим на более простой стандартный вариант. Если ваша задача — выбор одного из нескольких вариантов, стоит рассмотреть объект Переключатель. В 1С он отлично поддерживает навигацию стрелками. Если установить свойство Вид в значение Кнопки (в управляемых формах это достигается через свойство Вид элемента, связанного с числовым реквизитом или перечислением), то мы получим группу кнопок.

В этом случае платформа сама подсвечивает нажатую «кнопку-переключатель». Однако для изменения цвета именно фокуса (а не нажатого состояния) все равно придется комбинировать этот метод с первым способом (обработчиком ожидания) или условным оформлением, если переключатели размещены внутри таблицы.

Почему нельзя просто изменить цвет рамки?

Важно понимать техническую причину: желтая рамка в УФ и пунктир в ОФ — это системные индикаторы фокуса, которые рисует графическое ядро платформы поверх элементов. Платформа 1С не предоставляет программного доступа к свойствам этого графического объекта. Эти настройки зависят от темы оформления операционной системы. Именно поэтому единственным надежным способом выделить активный элемент является изменение его собственных свойств, таких как ЦветФона или Шрифт.

Резюме: Для простых задач и быстрой реализации используйте ПодключитьОбработчикОжидания. Для создания надежных и производительных интерфейсов выбирайте Таблицу с условным оформлением, имитирующую список команд. Если же требуется сложный визуальный эффект — используйте HTML-поле.