javascript - 在textarea更新时更改<pre>块内容

我正在尝试使<pre>...</pre>标记之间的内容由JavaScript呈现，其中内容是动态的。我希望做的是在文本区域内键入输入以更新<pre>标记中的显示。

我不确定如何在<pre>标记中指定内容，以在每次textarea更新时从textarea获取值。

非常感谢！

最佳答案

看到正在使用的代码会很有帮助，但是如果我没看错，这应该会有所帮助。假设这样的HTML：

<textarea id="type"></textarea>
<pre id="output"></pre>

此选项使用纯JavaScript：

var textarea = document.getElementById('type'),
    pre = document.getElementById('output');

if(textarea.addEventListener) {
    textarea.addEventListener('keyup',function(){
        pre.textContent = this.value;
    });
} else {
    textarea.attachEvent('onkeyup',function(){
        pre.textContent = this.value;
    });
}

为了简洁起见，此代码块使用jQuery库：

$('#type').on('keyup',function(){
    $('#output').text($(this).val());
});

请注意，在两种情况下，我都设置了<pre>的文本，而不是HTML。这样，您就可以在文本区域中输入HTML字符（例如<），并在<pre>元素中对其进行正确的转义。

Pure JavaScript Demo

jQuery Demo

如果您不希望在离开<pre>之后才更改<textarea>，则只需将'keyup'和'onkeyup'分别更改为'change'和'onchange'。

关于javascript - 在textarea更新时更改<pre>块内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12095409/