从 div 标签而不是文本区域标签进行实时 HTML/CSS 预览

我想要创建实时 HTML/CSS 预览在一页上。

但是使用textareas不会给出代码。该代码将固定在页面中（div).

我希望用户能够更改代码这将反映在实时预览框中。我创建了一个页面，您可以在其中更改部分脚本文本（对于业余爱好者）。您可以在这里预览：http://apolosiskos.co.uk/HTML-CSS-EDITOR/index3.html

01)如果我更换了，实时预览将不起作用textarea with a div.

02)即使我使用文本区域，实时预览也不起作用，因为在我的 HTML 脚本中我使用的是codeand the xmp tags.

--> 适用于 textarea 但不适用于 div 的代码片段：

var wpcomment = document.getElementById('WPComment');

wpcomment.blur = wpcomment.onkeypress = function(){
    document.getElementById('prevCom').innerHTML = this.value;
}

#prevCom
{
  background:#124;
  color:#fff;
  min-width:20px;
  min-height:50px;
  font-size:25pt;
}

<textarea name="WPcomment" id="WPComment" placeholder="Add comments:">aaaaa</textarea>

<div id="prevCom"></div>

没有成功。是否有其他 addEventListener() 方法可以替换 keyup？

Yes, blur

如果您想在<div>元素，您可以执行以下操作：

首先，您需要设置 tabindex 属性：

<div id="a-div" tabindex="1" />

然后， (2) 绑定keydown：

 $('#mydiv').bind('keydown', function(event) {
    //console.log(event.keyCode);
 });

如果您希望您的 div 从一开始就“集中”：

$(function() {
   $('#mydiv').focus();
});