更改<pre>在文本区域更新时阻止内容

Change <pre> block contents upon textarea update

本文关键字：更新 文本 pre lt gt 更改 区域      更新时间：2023-09-26

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

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

非常感谢！

看到您正在使用的代码会有很大帮助，但如果我读得正确，这应该会有所帮助。假设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>元素中正确转义。

纯JavaScript演示

jQuery演示

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

将onchange事件绑定到input，然后简单地将其值复制到pre:

<pre id="pre">Type something</pre>
<textarea id="text" rows="20" cols="20" />
​
<script type="text/javascript">
document.getElementById("text").onchange = function () {
  document.getElementById("pre").innerHTML = this.value;  
};
</script>

演示。​

相关文章：