.val () text field does not account for newlines

Question

The .val() property of an element in jQuery for a <textarea> does not seem to work with newlines. I need this function, since the text area is designed to recognize the enter key and display it as a preview with a new line in measure.

However, what happens is shown in this script: http://jsfiddle.net/GbjTy/1/ . The text is displayed, but not in a new line.

How can I get a preview to include newlines, and I know that this is possible because it does this in a preview of Post Post Post.

Thanks.

PS I saw other links to SO related to this, but everyone says that the end user can use some kind of code, which is not an ideal method for me. How can I achieve this if the End User does not write any specific code, like here, in the SO Preview Preview, where Enter works as it should in the preview.

Answer 1

This is a CSS issue, not a JavaScript issue. HTML cuts the gap by default - this includes ignoring newlines.

Add white-space: pre-wrap to the output div. http://jsfiddle.net/mattball/5wdzH/

This is supported in all modern browsers: https://caniuse.com/#feat=css3-tabsize

Answer 2

Reinforced newlines in textareas \n s, other HTML tags than textarea will ignore them. You must use <br /> to create new lines in these elements.

I suggest you use JavaScript to fix this, not CSS, since you already rely on JavaScript.

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

You can find the updated version here: http://jsfiddle.net/GbjTy/2/

Answer 3

Try something like this:

 $( "#watched_textarea" ).keyup( function() { $( "#output_div" ).html( $( this ).val().replace('\n', '<br/>') ); }); 

In HTML, spaces are ignored by default.

You can also change the <div> tag to the <pre> :

 <pre id="output_div"></pre> 

And that will work too.

Answer 4

 $( "#watched_textarea" ).keyup( function() { $( "#output_div" ).html( $( this ).val().replace(/[\r\n]/g, "<br />") ); }); 

You need to replace the newline characters with <br> tags to output HTML.

Here is a demo: http://jsfiddle.net/GbjTy/3/

Answer 5

Your newlines are displayed perfectly, but HTML ignores newlines: it needs <br> .

Use the simple newline-to-br function, for example:

 function nl2br_js(myString) { var regX = /\n/gi ; s = new String(myString); s = s.replace(regX, "<br /> \n"); return s; } $( "#watched_textarea" ).keyup( function() { $( "#output_div" ).html( nl2br_js($( this ).val()) ); }); 

jsfiddle here: http://jsfiddle.net/r5KPe/

Code from here: http://bytes.com/topic/javascript/answers/150396-replace-all-newlines-br-tags

Answer 6

If

• you do not display the .val () text field on another page (for example, submit the form to the servlet and switch to another JSP).

• using .val () text field as part of URL encoding (e.g. mailto: with body as textarea content) in Javascript / JQuery

then you need URLEncode to describe the text field as follows:

 var mailText = $('#mailbody').val().replace(/(\r\n|\n|\r)/gm, '%0D%0A'); 

Answer 7

There is a simple solution: make a container with a preliminary tag.

  <textarea id="watched_textarea" rows="10" cols="45">test </textarea> <pre class="default prettyprint prettyprinted"><code ><span class="pln" id="output_div">fdfdf</span></code></pre> <script> $("#watched_textarea").keyup(function() { $("#output_div").html($(this).val()); }); </script> 

Answer 8

 <?php //$rsquery[0] is array result from my database query //$rsquery[0] = 1.1st Procedure \n2.2nd Procedure //txtRisks is a textarea //sample1 function nl2br2($string) { $string = str_replace(array("\r\n", "\r", "\n"), "<br />", $string); return $string; } //sample2 function nl2br2($string) { $string = str_replace(array("\r\n", "\r", "\n"), "\\n", $string); return $string; } echo "$('#txtRisks').val('".nl2br2($rsquery[0])."')"; ?> 

PHP reference manually

Answer 9

I found a more convenient method using jquery.

samplecode

HTML

  <textarea></textarea> <div></div> <button>Encode</button> 

Js

 $('button').click(function() { var encoded = $('<label>').text($('textarea').val()).html();//the label element can be replaced by any element like div, span or else $('div').html(encoded.replace(/\n/g,'<br/>')) });