Как сделать так, чтобы текст из ввода появлялся в другом месте, когда пользователь печатает на нем?

Question

У меня есть контактная форма Wordpress, и она НЕ принимает контент HTML / JavaScript, а только своего рода BBCode, подобный этому:

[contact-form]
 [contact-field label="Name" type="name" required="1"/]
 [contact-field label="E-mail" type="email" required="1"/]
 [contact-field label="Website" type="url"/]
 [contact-field label="Comment" type="textarea" required="1"/]
[/contact-form]

Моя цель сделать то же самое, что и .

Answer 1

Если ваша единственная проблема не в том, чтобы использовать собственный JS. У меня есть простое решение.

1. Запишите свой js-код в отдельный файл.
2. Загрузите файл в корневую папку. 3. Найдите и откройте файл header.php и вставьте путь к файлу js, убедитесь, что он находится внутри вашего раздела head. Как то так

<script src="../path/to/your/file.js"></script>
</head>

Примечание: header.php можно найти на панели инструментов wp-admin -> Внешний вид -> Редактор

Answer 2

Поскольку форма bbcode будет преобразована в необработанную HTML-форму в качестве вывода, вы можете отследить идентификатор поля, проверив элемент в браузере. Вы можете использовать https://wordpress.org/plugins/custom-css-js/ для добавления пользовательского JavaScript на ваш сайт.

Например, у вас есть такой вывод из формы типа bbcode:

<div class='chatbox' id='chatbox'></div>
<input type='text' name='name' class='chatinput' id='chatinput'>

Вы можете добавить простой код JavaScript, чтобы выполнить работу:

var input = document.getElementById('chatinput');
input.onkeyup = function(){
    document.getElementById('chatbox').innerHTML = input.value;
}