单击按钮时如何将输入的文本从文本区域显示到文本窗格 (1)

📌 相关文章

📜 单击按钮时如何将输入的文本从文本区域显示到文本窗格 (1)

📅 最后修改于: 2023-12-03 14:50:28.498000 🧑 作者: Mango

如何在单击按钮时将输入的文本从文本区域显示到文本窗格

在许多应用程序中，我们需要在用户输入某些文本后将其显示在文本框或文本区域中。同样，在单击按钮时，我们需要将该文本从文本输入区域显示到文本窗格中。在本文中，我们将讨论如何在单击按钮时将输入的文本从文本区域显示到文本窗格中。

步骤1: 创建文本输入区域和文本窗格

我们需要创建一个文本输入区域，使用户能够输入文本。然后，我们需要创建一个文本窗格，在文本窗格中显示该文本。在以下示例中，我们将使用HTML和JavaScript创建这两个元素。

HTML代码：

<textarea id="input-area"></textarea>
<button id="my-button">Click me</button>
<div id="text-pane"></div>

JavaScript代码：

var inputArea = document.getElementById("input-area");
var textPane = document.getElementById("text-pane");

步骤2: 添加按钮单击事件处理程序

我们需要在按钮上添加单击事件处理程序，以在单击按钮时获取输入文本并将其显示在文本窗格中。

var myButton = document.getElementById("my-button");

myButton.addEventListener("click", function() {
  var inputText = inputArea.value;
  textPane.innerHTML = inputText;
});

在上面的代码中，我们获取文本输入区域的值并将其存储在变量inputText中。然后，我们将该文本设置为文本窗格的HTML内容。

步骤3: 运行代码

现在，我们可以在文本输入区域中输入任何文本。在单击按钮后，该文本将显示在文本窗格中。这就是我们单击按钮时将输入文本从文本区域显示到文本窗格的完整过程。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Button click to show text demo</title>
</head>
<body>
  <textarea id="input-area"></textarea>
  <button id="my-button">Click me</button>
  <div id="text-pane"></div>

  <script>
    var inputArea = document.getElementById("input-area");
    var textPane = document.getElementById("text-pane");
    var myButton = document.getElementById("my-button");

    myButton.addEventListener("click", function() {
      var inputText = inputArea.value;
      textPane.innerHTML = inputText;
    });
  </script>
</body>
</html>

以上就是单击按钮时将输入的文本从文本区域显示到文本窗格的详细步骤和完整代码示例。