Question

我正在尝试构建一个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。感谢任何可以提供帮助的人。

Answer 1

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

<script>
    $('#textareaId').keyup(function(){
        $('#myDiv').empty().html($(this).val());
    });
</script>

Answer 2

Horay，明白了，谢谢你的代码，鲍勃。我现在会慢慢弄清楚额外的麻烦。这是以蒸馏形式完成的页面：

<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>

如何获取用户输入的html字符串并在页面上呈现

2 个答案: