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

Question

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

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

我希望用户能够改变代码，这将反映在实时预览框。我已经创建了页面，你可以改变部分脚本文本(业余爱好者)。你可以在这里预览:http://apolosiskos.co.uk/HTML-CSS-EDITOR/index3.html

01)现场预览不工作，如果我用div替换textarea。

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

-->适用于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>

Answer 1

没有成功。是否有其他addEventListener()方法我可以代替keyup ?

是的,模糊

如果你想在<div>元素上添加keydown事件，你可以这样做:

首先，需要设置tabindex属性:

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

,(2)绑定keydown:

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

如果你想让div从一开始就"聚焦":

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

Answer 2

你应该把预览代码放在一个函数中，然后你可以在文档加载后调用它。

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

当你按下回车键时，你的预览只呈现单独的问题，是由于以下if语句:

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

if中的e.which == 13指定，只有当用户按下的键是enter键(代码13)时，块中的代码才应该运行。通过删除每个if语句的这一部分，任何按下的键都将执行块中的代码:

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

Answer 3

您的函数在keyup触发时调用，但在页面加载后不调用。

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

$(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();
        });
    });

这段代码不能工作，因为load事件只兼容以下HTML标签列表:body, frame, iframe, img, input type="image"， link, script, style

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