Copying text of textarea into div with line breaks

html, javascript, jquery, textarea

Solution

You need to convert the literal newlines into `<br>` tags for proper output in the DIV.

$('.'+contentAttr+'').html(value.replace(/\r?\n/g,'<br/>'));

Shown in your code below:

    $('.content:not(.focus)').keyup(function(){     
                                    
                                    
        var value = $(this).val();
        var contentAttr = $(this).attr('name');
        
        $('.'+contentAttr+'').html(value.replace(/\r?\n/g,'<br/>')); //convert newlines into <br> tags
        
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea name="mas" rows="15" class="content"></textarea> <p>&nbsp;</p> <div class="mas" >Texts Comes here</div>

JSFiddle

Problem

I am tying to make a simple effect using `keyup()` in jQuery. I just want that when user types into the `textarea` then the text which user types will copy to another div named `.content`. When I press enter in textarea a new line is created but in my div the text is showing in the same line. My code is below or you can see demo here: http://jsfiddle.net/Pqygp/ ``` $('.content:not(.focus)').keyup(function(){ var value = $(this).val(); var contentAttr = $(this).attr('name'); $('.'+contentAttr+'').html(value); }) ``` ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea name="mas" rows="15" class="content"></textarea> <p>&nbsp;</p> <div class="mas" >Texts Comes here</div> ```

Original source