在输入表单中设置实时文本的样式

Question

我想知道是否可以对要键入的文本进行样式设置。即键入时更改颜色和字体。注意：不是占位符文本。

Answer 1

是的，您可以将样式动态地应用于输入

window.onload = main;


function main() {

const el = document.getElementById('test');
console.log(el)
el.addEventListener('input', onChange);
}

function onChange(e) {
let text = e.target.value;

let colors = ['red', 'green', 'blue', 'magenta', 'cyan'];

e.target.style.color = colors[text.length % 5];
}

h2 {
font-family: sans-serif;
}

input {
padding: 5px;
font-size: 1.4em;
}

<h2> type in input to see the effect</h1>

<input id="test" />