1

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

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

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

01)如果我textarea用div.

02)即使我使用 textareas，实时预览也不起作用，因为在我的 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>

4

3 回答 3

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();
});
于 2016-10-20T14:49:22.810 回答
0

您的函数在 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、script、style 

$('.innerbox').load(function()
于 2016-10-20T14:54:41.083 回答
0

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

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

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

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

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

if($(this).val().length > 0)
于 2016-10-20T14:51:21.740 回答