1

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

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

非常感谢！

4

2 回答 2

5

查看您正在使用的代码会有很大帮助，但如果我阅读正确，这应该会有所帮助。假设 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。这允许您在 textarea 中输入 HTML 字符，并让它们在您的元素<中正确转义。<pre>

纯 JavaScript 演示

jQuery 演示

如果您不想<pre>在离开 之前<textarea>更改 ，那么只需分别更改'keyup'和'onkeyup'至'change'和'onchange'。

于 2012-08-23T15:50:41.970 回答
0

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>

演示。​</p>

于 2012-08-23T15:48:03.190 回答