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

#javascript #label

#javascript #ярлык

Вопрос:

Я планирую разработать форму для сбора сведений об общении с пользователем. Обычно они состоят из адреса, имени, номера телефона и т.д.

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

Есть какие-либо указания, как сделать это с помощью bootstrap JavaScript?

Ответ №1:

Взгляните на Mutation Observer API:

здесь

и здесь

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


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