Delete the contents of a text area while retaining line breaks

Question

In HTML/JS, I have a script that when the enter key is pressed, it copies the text from the textarea and then deletes the text. The problem is, after deleting the text, the line breaks for the enter key are still there. My code is as follows:

function Send() {
    let lastText = document.getElementById("textInput").value;
    document.getElementById("sent").innerHTML = lastText;
    document.getElementById("textInput").value = "";
}

functionKeyDetection(event) {
    let key = event.key;
    if (key == "Enter") {
        Send()
    }
}

<textarea
    id = "textInput"
    class = "textInput"
    rows = "1"
    cols = "50"
    placeholder = "write here"
    onkeydown = "KeyDetection(event)"></textarea>

<p id = "sent"></p>

I tried using null and empty string. I was hoping it would remove the newlines produced by pressing the enter key, but with no success.

Answer 1

If you want to prevent a newline character from being added when the Enter key is pressed, you can do this by using the event.preventDefault() method. This will effectively cancel the default behavior of the Enter key press event.

function KeyDetection(event) {
  let key = event.key;
  if (key == "Enter") {
    event.preventDefault();
    Send();
  }
}