javascript - 当用户在文本框中输入时，使用现代 HTML/JS 在屏幕上实时输入样式文本

Question

当用户在文本框中键入内容时，我需要在屏幕上编写风格化的字体预览 - 像这样(尽管我认为这使用了过时的编码技术): https://www.pet-tags.co.uk/engravingdetail?product=57&size=2

我找不到执行此操作的具体示例 - 我发现这个问题类似，但没有将输出写到屏幕上: Best way to track onchange as-you-type in input type="text"?

我想确保这是以现代方式完成的，并具有广泛的当代浏览器支持(因此排除 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>