前端实现：用户输入内容，点击按钮，在另一个页面预览显示效果_怎么在input标签输入多个内容,点击按钮显示在页面-CSDN博客

本文链接：https://blog.csdn.net/qq_41487733/article/details/132686399

要在前端实现用户输入内容，然后点击按钮，在另一个页面预览显示效果，你可以使用HTML、CSS和JavaScript来完成这个任务。以下是一个简单的示例：

创建一个HTML文件（例如index.html）作为你的输入页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入内容预览</title>
</head>
<body>
    <h1>输入内容：</h1>
    <textarea id="inputText" rows="4" cols="50"></textarea>
    <button onclick="preview()">预览</button>

    <script>
        function preview() {
            const inputText = document.getElementById("inputText").value;
            localStorage.setItem("previewContent", inputText);
            window.open("preview.html", "_blank");
        }
    </script>
</body>
</html>

在上面的示例中，我们创建了一个包含文本输入框和一个预览按钮的HTML页面。当用户输入内容并点击预览按钮时，它将文本内容存储在localStorage中，并打开一个新的窗口或标签页（在新页面中显示预览）。

创建另一个HTML文件（例如preview.html），用于显示预览内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预览页面</title>
</head>
<body>
    <h1>预览内容：</h1>
    <div id="previewContent"></div>

    <script>
        const previewContent = localStorage.getItem("previewContent");
        if (previewContent) {
            document.getElementById("previewContent").textContent = previewContent;
        }
    </script>
</body>
</html>