javascript - 更改文本时更改 <pre> block 内容

  显示原文与译文双语对照的内容
0 0

<pre>...</pre> 标记中,我试图获得标记的内容,其中内容是动态的。 我希望在textarea中输入一个输入来更新 <pre> 标签中的显示。

我不确定如何在 <pre> 标记中指定内容,以便从每个文本文件更新中获取on的值。

非常感谢!

时间:原作者:4个回答

0 0

看到你正在使用的代码会很有帮助,但是如果我读得正确,这应该能帮助你。 假设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;
 });
}

这里代码 block 使用jQuery库进行简洁:

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

请注意,在两种情况下,我将设置 <pre>文本而不是 HTML 。 这允许你在文本框中输入像 < 这样的HTML字符,并让它们在 <pre> 元素中正确转义。

纯JavaScript演示

的jQuery演示

如果你不希望在离开 <textarea> 之前更改 <pre>,那么只需将 'keyup''onkeyup' 分别更改为 'change''onchange'

原作者:
0 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>

原作者:
...