jQuery：按 Enter 后如何将文本从 textarea 追加到段落？

Question

当用户presses enter 时，我想将用户键入的文本从textarea 移动到我选择的段落中。问题是输入已经编程到textarea。它的功能是创建一个新行，但我想将该功能替换为：

当用户按下回车键时，它会将文本从文本区域移动到

这是我的段落和文本区域的 html 代码：

<hr id="LineOne">
<p id="UserInput"></p>
<hr id="LineOne">
<textarea placeholder="Type Message Here:"></textarea>

这是我的 jQuery（这是我认为问题发生的地方，所以在这里要多加注意：

$(document).ready(function(){
    $('textarea').bind("enterKey",function(e){
        textarea.moveTo('#UserInput');
    });
});
    $('textarea').keyup(function(e){
        if(e.keyCode == 13){
        $(this).trigger("enterKey");
        }
});

我是 jQuery 的新手/新手，我从 Stack Overflow 中的另一个问题中找到了问题，并对其进行了编辑以满足我的需要，但它并没有按照我想要的方式工作，你能告诉我为什么它不能工作以及如何工作吗？修复它。

而且，我怎么能在用户发送消息后在他们发送的消息后放置一个空格，这样它就不会附加他们制作同一行的每条消息？

我想这样做，如果我从 textarea 中删除文本，段落（或 UserInput）仍会保存该文本。

Answer 1

你可能正在寻找这个

$(document).ready(function() {
  $('textarea').keyup(function(e) {
    // Regex for matching new lines which will be replaced with <br />
    // to make new line onto the paragraph.
    var newval = $(this).val().replace(/(?:\r\n|\r|\n)/g, '<br />');
    var para = $('#myparagraph');
    
    // Keycode 13 is the Enter key
    if (e.keyCode == 13) {
      // Append the all text inside the textarea into paragraph
      para.append(newval);
      $(this).val(''); // Clear the textbox
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr/><p id="myparagraph"></p><hr/>
<textarea></textarea>

Answer 2

您不需要 jquery 来执行此操作。只需这样做：

var input = document.getElementById('input');
var output = document.getElementById('output');

input.addEventListener('keydown', function(event) { // when a key is pressed
  if (event.keyCode == 13 && input.value != '\n') { // if the key is the enter key
    output.innerHTML += '<br>' + input.value;
    input.value = '';
  }
});

input.addEventListener('keyup', function(event) { // when a key is released
  if (event.keyCode == 13) { // if the key is the enter key
    input.value = '';
  }
});

<hr id="LineOne">
<p id="output"></p>
<hr id="LineOne">
<textarea id="input" placeholder="Type Message Here:"></textarea>