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

Question

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

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

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

01) 如果我将 textarea 替换为 div，实时预览将不起作用。

02) 即使我使用文本区域，实时预览也不起作用，因为在我的 HTML 脚本中我使用的是 code 和xmp 个标签。

--> 适用于文本区域但不适用于 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>

Answer 1

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

是的，blur

如果您想在 <div> 元素上添加按键事件，您可以执行以下操作：

首先需要设置tabindex属性：

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

那么， (2) 绑定keydown:

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

如果您希望 div 从一开始就是 "focused"：

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

Answer 2

您应该将预览代码放在一个函数中，然后您可以在文档加载后简单地调用它。

https://jsfiddle.net/michaelvinall/4053oL1x/1/

当您按下回车键时，您的预览仅渲染的单独问题是因为以下 if 声明：

if(e.which == 13 && $(this).val().length > 0)

您的 if 中的 e.which == 13 指定如果用户按下的键是回车键（代码 13），块中的代码只能是运行。通过删除每个 if 语句的这一部分，按下任何键都将执行块内的代码：

if($(this).val().length > 0)

Answer 3

你的函数在 keyup 被触发时被调用，但在页面加载后没有被调用。

您必须这样做：定义在触发 2 个不同事件时调用它们的函数。

$(function() {
        function GetHtml(){
                var html = $('.html').val();
                return html;
            }

        function GetCss(){
                var Css = $('.css').val();
                return Css;
            }

        var previewRendering = function(){
                        console.log('kikou');
            var targetp = $('#previewTarget')[0].contentWindow.document;
            targetp.open();
            targetp.close();

          var html = GetHtml();
          var css = GetCss();

          $('body',targetp).append(html);
          $('head', targetp).append('<style>' + css + '</style>');

        };

        $('.innerbox').on("keyup",function(){
                previewRendering();
            });

        $(document).ready(function() {
            previewRendering();
        });

    });

此代码无法运行，因为加载事件仅与 HTML 标签列表兼容：body、frame、iframe、img、input type="image"、link、脚本、样式

$('.innerbox').load(function()

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

Live HTML/CSS preview from a div tag and not a text area tag

html

javascript

css

jquery

live-preview