我正在尝试获取要由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>
演示。