CODEWITHSUNDEEP
javascriptjqueryhtmltextarea
Kamal
Kamal

Reputation: 2180

Copying text of textarea into div with line breaks

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>

Upvotes: 15

Views: 26959

Answers (5)

MDEV
MDEV

Reputation: 10838

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

Upvotes: 20

dominik791
dominik791

Reputation: 752

If you use React:

render() {
  const nbOfTextareaRows = this.state.textareaValue.split('\n').length;

  return (
    <textarea
      value={this.state.textareaValue}
      onChange={e => this.setState({ textareaValue: e.target.value })}
      rows={nbOfTextareaRows}
    />
  );
}

Upvotes: 0

JJJ
JJJ

Reputation: 33153

Add a white-space: pre-wrap rule to the div's CSS. 

.mas {
    white-space: pre-wrap;
}

Demo: http://jsfiddle.net/Pqygp/13/

Upvotes: 40

GautamD31
GautamD31

Reputation: 28753

Try like

var value = $(this).();
var contentAttr = $(this).attr('name');

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

This is the DEMO

Upvotes: 1

Smern
Smern

Reputation: 19086

Use this line: Fiddle

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

The problem was that newlines don't create linebreaks in html, but <br> will.

Upvotes: 6

Related Questions