时间戳

首页 > 解决方案 > textarea中的HTML代码，弹出结果预览的按钮

javascript - textarea中的HTML代码，弹出结果预览的按钮

问题描述

除了主要部分之外，我已经完成了任务中的所有工作。我不知道如何让我的代码将我的 textarea 内容作为 HTML 代码读取并在新窗口中显示结果。我什至不知道如何在内容出现时显示它们。

我没有保留我访问过的所有不同论坛的完整日志，但这里有几个我正在检查的最后几个。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      Wiki editor
    </title>
  </head>

  <body>
    <h1> Rachel </h1>
    <script>
      var previewOpen;
      function preview() {
        previewOpen = window.open("", "previewOpen", "width=500, height=600");
        previewOpen.document.body.innerHTML = "HTML"; // Get the value of text area and run HTML code
      }
      function closePreview() {
        previewOpen.close();
        // function to close the preview 
      }
    </script>
    <p>Type your HTML code below:</p>
    <textarea rows="20" cols="75">
</textarea>
    <!-- textarea for submittance of code to be read and written -->
    <br>
    <span><input id="preview" type="submit" value="Preview" onClick="preview()">
    <input id="closePreview" type="submit" value="Close Preview" onClick="closePreview()"></span> <!-- buttons with event handlers to read areatext and perform functions-->
  </body>
</html>

标签： javascriptjqueryhtmlcsstextarea

解决方案

下面的代码行将静态“HTML”字符串值分配给新打开的窗口主体。 

previewOpen.document.body.innerHTML = "HTML"; // Get the value of text area and run HTML code

如果要获取用户输入的值，则必须获取 的值textarea。

为此，您可以做这样的事情。

1.首先将id添加到您的textarea.

<textarea id="userValues" rows="20" cols="75">

2.然后从 中获取用户值function preview()。

 function preview() {
        previewOpen = window.open("", "previewOpen", "width=500, height=600");
        previewOpen.document.body.innerHTML = document.getElementById("userValues").value; // Get the value of text area and run HTML code
      }

它会像这样显示

干杯！！！

推荐阅读