Автоматический предварительный просмотр содержимого формы перед отправкой с использованием JavaScript

Question

Я планирую разработать форму для сбора информации о взаимодействии пользователей.Как правило, они состоят из адреса, имени, номера телефона и т. Д.

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

Есть ли какие-нибудь указатели, чтобы сделать это с помощью начальной загрузки JavaScript?

Answer 1

Взгляните на API наблюдателя мутации:

здесь

и здесь

Позволяет отслеживать изменения в DOM и вызывать функции обратного вызова . Я недавно сделал редактируемую таблицу HTML, используя ее, она довольно интуитивно понятна. Вы можете отслеживать изменения атрибутов, изменения дерева DOM и т. Д. Поэтому я предлагаю создать «шаблон», который будет соответствовать вашим переменным (адрес, имя и т. Д.), Стилизовать его с помощью Bootstrap и использовать Mutation Observer API, чтобы заполнить его всякий раз, когда вы считаю нужным.

---

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