При переходе на новые версии платформы «1С:Предприятие» (начиная с релиза 8.3.14.1565 и выше, включая современные сборки 8.3.16+) многие разработчики столкнулись с неожиданным поведением элементов внутри Поля HTML-документа. Кнопки отправки форм <input type="submit">, обычные кнопки <button> и даже стандартные текстовые инпуты, которые раньше в старых версиях (например, в 1С 8.1 или ранних 8.3 на движке Internet Explorer) выглядели как привычные объемные системные клавиши, внезапно превратились в плоские, серые и визуально «неактивные» прямоугольники.
В этой статье мы подробно разберем, почему произошло такое изменение, как заставить кнопки снова выглядеть привлекательно и интерактивно с помощью стилизации CSS, а также как правильно настроить передачу данных и обработку кликов на стороне платформы «1С:Предприятие» в условиях использования нового современного движка отображения.
Ранее в операционных системах семейства Windows платформа 1С использовала для отображения HTML-документов устаревший системный движок MSHTML (ActiveX-компонент Internet Explorer). Этот движок автоматически применял к стандартным тегам формы (кнопкам, полям ввода, переключателям) визуальные стили текущей операционной системы Windows. Кнопки получали характерные 3D-рамки, градиенты и системную анимацию нажатия по умолчанию, даже если разработчик вообще не использовал стили.
С целью унификации платформы на всех операционных системах (Windows, Linux, macOS) фирма «1С» перевела встроенный браузер на современный кроссплатформенный движок WebKit. В WebKit по умолчанию отключена глубокая системная стилизация элементов управления. Из-за этого стандартные кнопки рендерятся в максимально упрощенном виде — как плоские двухмерные плашки без рамок, теней и градиентов. Пользователю визуально кажется, что кнопка заблокирована или неактивна, хотя технически она продолжает реагировать на клики.
Для решения этой проблемы нам необходимо выполнить два шага:
---
Проанализируем ситуацию: чтобы кнопка выглядела «живой», нам нужно добавить стили для ее обычного состояния, состояния при наведении курсора (:hover) и состояния в момент клика мышкой (:active). Рассмотрим пример HTML-кода со встроенной таблицей стилей CSS, который решит проблему визуальной неактивности:
<!DOCTYPE html>
<html>
<head>
<style>
/* Основной стиль для кнопки */
.my-custom-button {
background-color: #4CAF50; /* Зеленый цвет фона */
border: none; /* Убираем стандартную рамку */
color: white; /* Белый цвет текста */
padding: 10px 24px; /* Внутренние отступы */
text-align: center; /* Выравнивание текста по центру */
text-decoration: none; /* Отсутствие подчеркивания */
display: inline-block;
font-size: 14px; /* Размер шрифта */
margin: 4px 2px;
transition-duration: 0.4s; /* Плавность анимации перехода */
cursor: pointer; /* Изменение курсора при наведении */
border-radius: 4px; /* Скругление углов кнопки */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Легкая тень */
}
/* Стиль кнопки с белым фоном и зеленой рамкой */
.button-test {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
/* Эффект при наведении курсора */
.button-test:hover {
background-color: #008CBA;
color: white;
}
/* Эффект при физическом нажатии на кнопку */
.button-test:active {
background-color: #006687;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transform: translateY(1px); /* Небольшой сдвиг вниз для эффекта нажатия */
}
</style>
</head>
<body>
<p>Применим созданные стили к кнопкам разных типов:</p>
<p>
<!-- Использование стандартного тега button с классом -->
<button class="my-custom-button button-test" id="btnSave" data-action="save_coords">Сохранить изменения</button>
</p>
</body>
</html>
Использование свойства transition-duration позволяет сделать смену цвета при наведении плавной, а псевдокласс :active симулирует физическое вдавливание кнопки в экран, возвращая пользователю привычный тактильный отклик интерфейса.
---
Разобравшись с дизайном, перейдем к программной логике. Нам больше не нужно привязывать громоздкие JS-функции напрямую к событиям onclick внутри HTML (хотя это по-прежнему возможно). Платформа «1С:Предприятие» в управляемых формах предоставляет удобное предопределенное событие для элемента формы с типом Поле HTML-документа.
Это событие называется ПриНажатии. Давайте настроим его обработку. Выясним, как перехватить нажатие на нашу новую кнопку и распознать, какой именно элемент был выбран пользователем.
Для этого мы воспользуемся параметром ДанныеСобытия, который автоматически передается платформой в процедуру-обработчик 1С. Мы можем прочитать идентификатор элемента id или использовать современные HTML5 data-атрибуты (например, data-action), чтобы понять контекст клика.
Рассмотрим пример кода обработчика в модуле управляемой формы 1С:
&НаКлиенте
Процедура ПолеHTMLДокументаПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
// Предотвращаем стандартный переход браузера по ссылке или сабмит формы
СтандартнаяОбработка = Ложь;
// Получаем DOM-элемент, на который нажал пользователь
ТекущийЭлементHTML = ДанныеСобытия.Element;
Если ТекущийЭлементHTML = Неопределено Тогда
Возврат;
КонецЕсли;
// Проверяем нажатие по кнопке через ее идентификатор (id)
Если ТекущийЭлементHTML.id = "btnSave" Тогда
ПоказатьПредупреждение(, "Нажата кнопка сохранения координат!");
ВыполнитьСохранениеДанныхНаСервере();
КонецЕсли;
// Более гибкий и современный подход - анализ data-атрибутов
// WebKit позволяет считывать атрибуты напрямую через метод getAttribute
ИмяДействия = ТекущийЭлементHTML.getAttribute("data-action");
Если ИмяДействия = "save_coords" Тогда
// Обрабатываем конкретное действие
ВыполнитьСохранениеДанныхНаСервере();
КонецЕсли;
КонецПроцедуры
Этот способ крайне эффективен, поскольку нам не нужно плодить множество JS-скриптов внутри HTML-кода. Достаточно сверстать красивый интерфейс с кнопками, разметить их атрибутами id или data-*, а всю бизнес-логику выполнять непосредственно в коде 1С в процедуре ПриНажатии.
---
Помимо визуальной составляющей, переход на WebKit изменил внутреннюю объектную модель взаимодействия между JavaScript внутри документа и кодом 1С. Если вы используете вызовы JS-методов из кода 1С, примите во внимание следующие важные изменения:
Элементы.ПолеHTML.Document.parentWindow.eval(). В WebKit свойство parentWindow полностью отсутствует. Вместо него используйте свойство defaultView. Пример вызова функции JavaScript теперь выглядит так:
Элементы.ПолеHTML.Документ.defaultView.SaveNewCoordsInBase();fireEvent, специфичный для Internet Explorer, более не поддерживается в движке WebKit. Если вам программно требуется имитировать клик или отправку данных из скрипта, используйте стандартный метод dispatchEvent или прямой метод элемента click().Проанализировав эти изменения, мы видим, что переход на WebKit сделал разработку веб-интерфейсов внутри 1С более стандартизированной. Теперь правила верстки подчиняются общепринятым стандартам веб-разработки (HTML5 и CSS3), избавляя программистов от необходимости поддерживать устаревшие костыли, специфичные для Internet Explorer.