从div标记（而不是文本区域标记）生成HTML / CSS预览 [英] Live HTML/CSS preview from a div tag and not a text area tag

问题描述

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

但是代码不会使用textareas 。代码将在页面中固定（ div ）。

But the code will not be given using textareas. The code is going to be fixed in the page (div).

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

I want the user to be able to alter the code and that will reflect on the live preview box.I have created the page where you can change parts of the script text (for amateurs). You can preview that here : http://apolosiskos.co.uk/HTML-CSS-EDITOR/index3.html

01）如果我替换 textarea 与 div 。

02）即使我使用textareas，实际预览也无效，因为在我的HTML脚本中，我使用代码和 xmp 标签。

02) Even if I use the textareas, the live preview does not work because in my HTML script I am using the codeand the xmp tags.

a textarea但不包含div：

--> Snippet that works with a textarea but not with a 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？

with no success. Is there any other addEventListener() method I can replace keyup with?

是的，模糊

如果您要添加keydown < div> 元素上的事件，您可以执行以下操作：

If you would like to add keydown events on a <div> element, you can do the following:

首先， tabindex属性：

First, you need to set the tabindex attribute:

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

然后，
（2）绑定到键：

Then, (2) Bind to keydown:

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

如果你希望你的div从一开始就是专注：

If you would like your div to be "focused" from the start:

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

这篇关于从div标记（而不是文本区域标记）生成HTML / CSS预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！