在输入中按下输入时如何在标签上插入新行

Question

I am dynamically changing the value of a text (destinationtext) using an input with javascript. It's a multiline input. But i can't add a new line at destination text when I press enter. How can i do this?

   <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>

....

This is the div's style

  .destinationtext {
        position: absolute;
        top: 0px;
        left: 289px;
        width: 233px;
        height: 122px;
        line-height: 122px;
        z-index: 13;
        text-align: center;
        font-family: Hind;
        font-size: 16px;
        vertical-align: middle;
        color: white;
        margin: 5px 5px 5px 5px;
        padding-left: 10px;
        padding-right: 10px;
    }

I'm using this simple code to change values

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

My problem basically looks like this:

Answer 1

I think you just need to apply a style to the div

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

Answer 2

If you want to see line breaks in your span element, you need to change the newline character from the input into a <br> tag. Something like:

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

Note that I'm using .html() instead of .text() because .text() would encode HTML tags. The main difference is that .html() will replace any other HTML content that you might have in the span.