0

我正在尝试构建一个 HTML 测试器，允许用户检查他/她的页面内容稍后将如何呈现。他们所要做的就是输入带有 html 格式的文本 - 他们不需要构建整个网页。这就是我要做的事情......我已经简化了这个，所以它只是我整个页面的基本要素：

<html>
<head>
    <style type="text/css">
    .mockup {
    position:absolute;
    left:1px;
    top:350px;
    width:530px;
    height:272px;
    z-index:250;
    overflow:hidden;
    background-color:#b2d0e3;
    font-family:"Times New Roman";
    font-size:16px;
    }
    </style>

    <SCRIPT language="VBScript">
    Sub sumChar
        'removed code
    End Sub

    Sub sendData() 
        Document.body.myDiv.InnerHTML = editableText.Value
    End Sub 
    </script>
</head>
<body>
    <p align="left"><font face="arial" size="2">Edit text here:</font></p>

    <textarea name="editableText" rows="11" cols="74" onchange="sumChar" onkeydown="sumChar" onkeyup="sumChar" onpaste="sumChar" oninput="vbscript:sumChar" tabIndex=4 language="VBscript"><b>Here</b> is some sample text with tags.<br />This needs to be rendered with formatting.</textarea>

    <p align="left"><input name="Button1" type="button" value="Send Data" style="height: 40px; width: 263px; font-size: larger" tabIndex=5 OnClick="vbscript:sendData" language="VBscript"></p>

    <div id="myDiv" class="mockup">
    </div>
</body>

您可以看到我正在尝试传递 html，以便它呈现在页面底部的 div 中。是否可以？它不能按原样工作，显然我错了。有没有人有任何建议......并随时告诉我我应该在 javascript 中执行此操作（以删除 Internet Explorer 限制）。尽管不幸的是，我甚至是 javascript 的新手。感谢任何可以提供帮助的人。

4

2 回答 2

1

您还可以使用 jQuery 来简化事情（javascript 库）。只需在文档中包含 jQuery 库并将以下代码添加到底部

<script>
    $('#textareaId').keyup(function(){
        $('#myDiv').empty().html($(this).val());
    });
</script>
于 2013-10-03T14:31:03.470 回答
1

万岁，明白了，谢谢你的代码，鲍勃。我现在会慢慢找出多余的东西。这是蒸馏形式的完成页面：

<html>
<head>
    <style type="text/css">
    .mockup {
    position:absolute;
    left:1px;
    top:250px;
    width:530px;
    height:272px;
    z-index:250;
    overflow:hidden;
    background-color:#b2d0e3;
    font-family:"Times New Roman";
    font-size:16px;
    }
    </style>
</head>

<body>
    <textarea id="textareaId" rows="11" cols="74"><b>Here</b> is some sample text with tags.<br />This needs to be rendered with formatting.</textarea>
    <div id="myDiv" class="mockup">
    </div>
</body>

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $('#textareaId').keyup(function(){
        $('#myDiv').empty().html($(this).val());
    });
</script>

</html>
于 2013-10-03T19:52:01.807 回答