Как передать текст из поля ввода 1С в HTML-документ на обычной форме?

← На главную

В процессе разработки интерфейсов на платформе 1С:Предприятие часто возникает задача интеграции стандартных элементов формы с веб-технологиями. Одной из типичных проблем является синхронизация данных: когда текст, вводимый пользователем в обычное ПолеВвода 1С, должен мгновенно или по завершении ввода отображаться внутри ПолеHTMLДокумента (например, в теге input или textarea). В этой статье мы подробно разберем, как наладить это взаимодействие в обычных формах, проанализируем работу с DOM (Document Object Model) и выясним, какие события формы лучше всего подходят для решения этой задачи.

Разбор архитектуры взаимодействия 1С и HTML

Прежде чем переходить к коду, давайте проанализируем ситуацию. Когда мы размещаем на форме элемент ПолеHTMLДокумента, 1С фактически встраивает браузерный движок (обычно Internet Explorer в режиме совместимости). Чтобы управлять содержимым этого поля, нам нужно обращаться к его внутреннему свойству Документ. Это свойство предоставляет доступ к COM-объекту HTML-страницы.

Многие начинающие разработчики пытаются использовать метод click() или focus(), надеясь, что это спровоцирует передачу данных, однако для прямой вставки текста необходимо работать со свойством value конкретного HTML-узла. Рассмотрим, как это реализовать на практике.

Способ 1. Синхронизация по завершении ввода

Это самый простой и стабильный вариант. Мы будем передавать данные в HTML в тот момент, когда пользователь закончил редактирование поля 1С и нажал клавишу Enter или переключил фокус на другой элемент.

Для реализации этого метода нам потребуется обработчик события ОкончаниеВводаТекста или ПриИзменении. Рассмотрим пример кода, который находит элемент input по его идентификатору (ID) и присваивает ему значение из 1С:


Процедура ПолеВвода1ОкончаниеВводаТекста(Элемент, Текст, Значение, СтандартнаяОбработка)
    // Получаем доступ к объектной модели HTML-документа
    HTMLДокумент = ЭлементыФормы.ПолеHTMLДокумента1.Документ;
    
    // Ищем поле ввода внутри HTML по его ID (например, "content")
    ЭлементHTML = HTMLДокумент.getElementById("content");
    
    Если ЭлементHTML <> Неопределено Тогда
        // Устанавливаем значение напрямую в свойство value
        ЭлементHTML.value = Текст;
        
        // В некоторых случаях полезно принудительно обновить отображение
        ЭтаФорма.Обновить();
    КонецЕсли;
КонецПроцедуры

В данном примере мы используем параметр Текст, который содержит актуальное значение, введенное пользователем. Метод getElementById является наиболее надежным способом поиска элемента, если в вашем HTML-коде прописан id="content".

Способ 2. Передача текста в реальном времени (посимвольно)

Если задача стоит так, что текст должен появляться в HTML «символ в символ» во время набора в 1С, нам потребуется другое событие. В обычных формах (ОФ) событие ПриИзменении срабатывает слишком поздно. Для «живого» поиска или отображения лучше всего подходит событие АвтоПодборТекста.

Рассмотрим алгоритм реализации динамической синхронизации:

Выбираем ПолеВвода на форме 1С.
В свойствах находим событие АвтоПодборТекста.
Внутри процедуры обращаемся к DOM-модели HTML-документа.


Процедура ПолеВвода1АвтоПодборТекста(Элемент, Текст, ТекстАвтоПодбора, СтандартнаяОбработка)
    // Чтобы стандартные механизмы 1С не мешали, можем отключить стандартную обработку
    // Но для простой передачи текста это необязательно
    
    HTMLДокумент = ЭлементыФормы.ПолеHTMLДокумента1.Документ;
    
    // Поиск элемента с использованием селектора (аналог querySelector в JS)
    ЭлементHTML = HTMLДокумент.querySelector("input[name='content']");
    
    Если ЭлементHTML <> Неопределено Тогда
        // Присваиваем текущий набираемый текст
        ЭлементHTML.value = Текст;
    КонецЕсли;
КонецПроцедуры

Важный нюанс: при использовании АвтоПодборТекста нужно помнить, что событие генерируется при каждом нажатии клавиши. Если HTML-страница «тяжелая» или содержит сложные скрипты, это может привести к кратковременным задержкам интерфейса.

Разбор типовых ошибок и их решение

Проанализируем ситуацию, с которой столкнулся автор темы: почему ЭлементHTMLДокумента.value = "Текст" работает, а передача переменной — нет? Выясним основные причины:

Неправильный поиск элемента: Если вы используете querySelector("input[type='text']"), убедитесь, что на странице только одно такое поле. Если их несколько, 1С выберет первое попавшееся. Всегда лучше использовать уникальный id.
Отсутствие обновления данных: В обычных формах 1С иногда требуется явно вызвать ОбновитьОтображениеДанных() или ЭтаФорма.Обновить(), чтобы изменения в COM-объекте отрисовались на экране.
События JavaScript: Простое изменение value через код 1С не вызывает события onchange или oninput внутри самого браузера. Если на вашем HTML-поле «висит» скрипт, который должен сработать при вводе, он не запустится. В этом случае нужно программно инициировать событие через dispatchEvent.

Продвинутый метод: Вызов функции JavaScript

Чтобы избежать проблем с кодировками или сложной логикой обработки текста, мы рекомендуем не менять значение напрямую, а вызывать JS-функцию, заранее написанную в HTML-коде. Рассмотрим этот пример подробнее.

Добавьте в ваш HTML-код следующий скрипт:


<script>
function updateMyField(newVal) {
    var input = document.getElementById('content');
    input.value = newVal;
    // Дополнительная логика, например, смена цвета или валидация
    input.style.backgroundColor = '#e0ffe0';
}
</script>

Теперь из 1С вы можете вызвать эту функцию одной строкой:


HTMLДокумент = ЭлементыФормы.ПолеHTMLДокумента1.Документ;
// Вызываем функцию через parentWindow или defaultView (зависит от версии IE)
HTMLДокумент.parentWindow.updateMyField(ТекстИз1С);

Заключение: Мы рассмотрели несколько способов передачи данных из 1С в HTML. Для простых задач достаточно прямого присвоения value в событии ОкончаниеВводаТекста. Для интерактивных интерфейсов лучше использовать вызов JavaScript-функций, что обеспечит корректную работу внутренних сценариев веб-страницы.