Javascript 在输入中按enter键时如何在标签上插入新行

我正在使用javascript输入动态更改文本（destinationtext）的值。这是一个多行输入。但当我按enter键时，无法在目标文本处添加新行。我该怎么做

   <div id="canvas1">
            <img src="~/img/temp_promosyon+fiyat_mobil.jpg" class="background1" />
            <img class="picturecanvas1mob" id="pic1mob" src="~/img/karisik_sandvic-mobil.jpg">
            <div class="logocanvas1mob"><span></span></div>
            <div class="destinationtext"><span id="destinationtext">@Model.PromosyonMetin</span></div>
            <div class="promfiyat1mob"><span id="fiyatmobdest">@Model.Fiyat</span></div>
        </div>

.... inside the form this is the input i use 

<div class="form-group row">
                <label asp-for="PromosyonMetin" class="col-sm-2 col-form-label">Metin</label>
                <div class="col-sm-10">
                    <textarea asp-for="PromosyonMetin" type="text" class="form-control" id="sourceinput" placeholder="Bol kabaklı mücver menüsü..." onKeyPress="copyText()"></textarea>
                </div>
            </div>

....

我使用这个简单的代码来更改值

  $(function () {
        $('#sourceinput').keyup(function () {
            $('#destinationtext').text($(this).val());
        });
    });

我的问题基本上是这样的：

---

我认为您只需要将样式应用于

div

#destinationtext {
   white-space: pre-wrap;
}

---

如果希望在

span

元素中看到换行符，则需要将换行符从输入更改为

标记。比如：

$('#sourceinput').keyup(function () {
    $('#destinationtext').html($(this).val().replace(/\n/g, '<br>'));
});

$（'#sourceinput'）.keyup（函数（）{
$（'#destinationtext'）.html（$（this.val（）.replace（/\n/g，
））；
});

---

请注意，我使用的是

.html（）

而不是

.text（）

，因为

.text（）

会对html标记进行编码。主要区别在于

.html（）

将替换span中的任何其他html内容。

文本区域中有两件事：1）您在

类型“=”text“

上有一个错误的双引号，2）您有一个

onKeyPress=“copyText（）“

我不知道这能做什么或应该做什么。如果没有这些，。谢谢，我删除了type属性中错误的双引号，但仍然不起作用。copyText（）函数是我使用的另一个与此无关的函数。很遗憾，Thank没有为我工作。谢谢你的帮助

$('#sourceinput').keyup(function () {
    $('#destinationtext').html($(this).val().replace(/\n/g, '<br>'));
});