Question

如何在同一页面上的另一个html框中创建一个示例html输入文本区域，就像在此MDN页面上一样？ https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals。请参阅页面底部的“主动学习”部分。可能有教程，但很难找到因为我不知道这叫什么...

Answer 1

您可以向textarea的input事件添加侦听器，并将其value复制到某个输出元素的innerHTML：

var txt = document.querySelector('textarea'),
    out = document.querySelector('div');
    
txt.addEventListener('input', updateOutput);

function updateOutput() {
    out.innerHTML = txt.value;    
}

updateOutput(); // also fill output at page load

div { border: 1px solid; white-space: pre-wrap; }
textarea { width: 100%; }

<textarea>type some text <b>here</b></textarea>
<h3>output</h3>
<div></div>

如何制作一个示例html输入文本区域，立即在同一页面上输出结果？

1 个答案: