时间戳

首页 > 解决方案 > 在用户输入的屏幕上分隔文本

javascript - 在用户输入的屏幕上分隔文本

问题描述

我有一个 HTML 页面，其中有一个<textarea>元素。假设我有一个发送按钮，可以在屏幕上显示消息。当发送多条消息时，它们的位置将移至上一条发送的消息下方。新消息将放在单独的容器中（我做了边框）。我已经使用了这个有效的代码。实际上，它并没有完全奏效。当您输入多条消息时，它不会创建包含消息的新消息边框，而是将所有文本放在同一个元素中。

const button = document.getElementById("sendButton");
button.addEventListener("click", displayText);

function displayText() {
  const display = document.getElementById("msg");
  const textArea = document.getElementById("enterMsg");

  display.append(
    textArea.value,
    document.createElement("br")
  );

  textArea.value = "";
}
body {
    background-color: skyblue;
    font-weight: bolder;
}

#enterMsg {
    margin-top: 34%;
    height: 130px;
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: darkorange;
    background-color: #d796ff;
    font-weight: bolder;
}

.enterText {
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: darkorange;
    background-color: #d796ff;
    font-weight: bolder;
}

#sendButton {
    margin-left: 96%;
}

#msg {
    margin-left: 80%;
    border: solid;
    border-color: #b19cd9;
    background-color: #b4ff94;
    border-radius: 50px;
    color: darkorange;
}

.extraSpace {
    padding: 5px;
}

textarea::placeholder {
  color: darkorange;
}

div.centered {
    text-align: center;
    border: solid;
    border-color: blue;
    margin-top: 10%;
    margin-bottom: 10%;
}

.confirmButton {
    text-align: center;
    margin-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main Page</title>
    <link rel="stylesheet" href="style.css">
    <script src="tools.js"></script>
</head>
<body>
    <p id="msg" class="extraSpace"></p>
    <textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
    <button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
</html>

正如我所说，此代码有效，但它将所有消息放在一个元素中。有什么办法可以使新边框出现，其中包含输入的文本，而不是将每条消息放入单个元素中？

标签： javascripthtml

解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main Page</title>
    <link rel="stylesheet" href="style.css">
    <script src="tools.js"></script>
</head>
<body>
    <div id="messages"></div>
    <textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
    <button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
</html>

const button = document.getElementById("sendButton");
button.addEventListener("click", displayText);


const textArea = document.getElementById("enterMsg");
const container = document.getElementById("messages");
function displayText() {
  // Create a new element with the message as it's inner text.
  const message = document.createElement("p");
  message.innerText = textArea.value;
  message.setAttribute("class", "msg");

  // Add that to the document
  container.appendChild(message);

  textArea.value = "";
}

您还必须更改样式表，因为msg现在是一个类而不是一个 ID（因为其中会有多个

推荐阅读