Question

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

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

非常感谢！

Answer 1

查看您正在使用的代码会有很大帮助，但如果我正确阅读，这应该会有所帮助。假设这样的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'并{分别为{1}}。

Answer 2

将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>

<强> DEMO

更改<pre> block contents upon textarea update</pre>

2 个答案: