jQuery textarea append newline behavior

jquery textarea newline append behavior
Suan picture Suan · Jan 29, 2010 · Viewed 92.6k times · Source

I'm trying to append a strings which end in newlines to a textarea using jQuery. However, different newline tokens show different behavior in Firefox3.5 and IE8, and I can't seem to find a way to use something that works for both browsers.

  • \n works in FF but not in IE
  • <br/> and \r\n work in IE but not in FF
  • No luck using <pre></pre> tags either

I've seen info on the IE innerHTML issue but I'm not exactly sure how to best approach this problem in jQuery. Thanks for any help!

Answer

Doug Neiner picture Doug Neiner · Jan 29, 2010

Not sure how you are setting the textarea content, but if you use the jQuery val method, \n works consistently in Firefox and IE (Including IE8):

var txt = $("textarea#idhere");
txt.val( txt.val() + "\nSomething here\n\nAgain");

Causes the textarea to display:

Existing content
and linebreaks if any.
Something here

Again

You can see a demo here that works in FF and IE8: Demo | Source

Related questions

New Line in Textarea to be converted to <br/>

There's a lot of threads here about converting br/> or preserving newlines across different languages, but not many regarding textarea. I have this script: var boxText = ""; $("textarea.BoxText").live('dblclick', function () { boxText = $(this).val().replace(/ /g, "<br/>"); $(…

Read More
The .val() of a textarea doesn't take new lines into account

The .val() property of an item in jQuery for a <textarea> doesn't seem to work with new lines. I need this function as the text-area is meant to recognize the enter key and display it as a preview, …

Read More
Set value of textarea in jQuery

I am attempting to set a value in a textarea field using jquery with the following code: $("textarea#ExampleMessage").attr("value", result.exampleMessage); The issue is, once this code executes, it is not altering the text in the textarea? However …

Read More