В режиме реального времени вводите стилизованный текст на экран как пользовательские типы в текстовом поле, используя современные HTML / JS

Question

Мне нужно написать стилизованный предварительный просмотр шрифта на экране, когда пользователь вводит текстовое поле - вот так (хотя я думаю, что для этого используются устаревшие методы кодирования): https://www.pet -tags.co.uk / engravingdetail? Продукт = 57 & размер = 2

Я не могу найти конкретный пример, делающий это - я нашел этот вопрос, который похож, но не выводит вывод на экран: Лучший способ отслеживать onchange по мере ввода в тип ввода = "текст"?

Я хотел бы убедиться, что это сделано современным способом с широкой поддержкой современных браузеров (поэтому, исключая, скажем, IE8, это хорошо).

Я не могу найти конкретных примеров этого онлайн.

Спасибо.

Answer 1

Вы должны использовать onInput событие.У меня довольно широкая поддержка: https://caniuse.com/#search=oninput.

Рабочий пример ниже:

const $source = document.querySelector('#source');
const $result = document.querySelector('#result');

$source.addEventListener('input', (e) => {
    $result.innerHTML = e.target.value;
})

<input id="source" />

<div id="result"></div>