PDA

View Full Version : How To Format Textarea With Newline?

dealmaker
09-09-2005, 12:32 AM
Hi,
I have a textarea element and I fill it with text. But I want to insert newlines to seperate some of the words in the textarea. I tried to use '\r' or '\n' or '\r\n', but none of them works.


var textArea = document.createElement('textarea');
textArea.value = 'good' + '\n' + 'morning';


The newline has no effect, it still show 'good morning'. Why?

And also, I am going to write these words in the textarea into database and later retrieve them back from database to another textarea, should I keep the newline characters or is it better use some other delimiter?

Many thanks.
Basscyst
09-09-2005, 01:21 AM
Not sure why it's not working for you, what browser are you using?

This works just fine in IE 6, which is basically the same as what you have there. The newline character should be just fine to house in the database as is.


<html>
<head>

<script>
function go()
{
var obj=document.createElement('textarea');
obj.value='good \nmorning';
document.body.appendChild(obj);
}
</script>
</head>
<body>
<input type="button" onclick="go();">
</body>
</html>
dealmaker
09-09-2005, 01:48 AM
I forgot to mention, it's actually inside a form element which is inside a div element.


var div=document.createElement('div');
var form=document.createElement('form');
var textArea = document.createElement('textarea');

textArea.value = 'good' + '\n' + 'morning';
form.appendChild(textArea);
div.appendChild(form);



Does it make any difference?

Not sure why it's not working for you, what browser are you using?

This works just fine in IE 6, which is basically the same as what you have there. The newline character should be just fine to house in the database as is.


<html>
<head>

<script>
function go()
{
var obj=document.createElement('textarea');
obj.value='good \nmorning';
document.body.appendChild(obj);
}
</script>
</head>
<body>
<input type="button" onclick="go();">
</body>
</html>
Basscyst
09-09-2005, 02:44 AM
Nope doesn't make a difference, if it's not working post your hole code and someone will have a look.

Basscyst
dealmaker
09-09-2005, 05:10 AM
I finally figured it out. I createtextnode in a div element. The text created will be ALWAYS one line, no matter how many newline you have, don't know why. I have to create a textarea element inside the div, then createtextnode in that textarea element. Then it works.
glenngv
09-09-2005, 05:52 AM
You can do it even without textarea by creating a <pre> tag and inserting the unicode values of line feed (\u000A) and carriage return (\u000D).
<html>
<head>
<script>
function go()
{
var pre=document.createElement('pre');
var text = document.createTextNode("line1\u000A\u000Dline2");
pre.appendChild(text);
document.body.appendChild(pre);
}
</script>
</head>
<body>
<form>
<input type="button" value="Go" onclick="go();" />
</form>
</body>
</html>
wisguy
12-02-2010, 10:25 PM
Using the following code from the clues I gleaned above I have successfully found a cross-browser solution
This was used after an ajax return


// my textarea id is named "LandingPageStats"
var obj=document.getElementById('LandingPageStats');
//listings is an array of values that i want to place in my textarea with newlines
for (var i = 0; i < listings.length; i++) {
obj.value+="This line is the first followed by the next "+listing[i]+"\n";
}
document.body.replaceChild(obj);
This works in all browsers I've tested including IE, FF, Chrome
Hope this is helpful to you as it was to me.
glenngv
12-03-2010, 04:31 AM
Wow. First post and resurrecting a 5-yr old thread...

Anyway, you can populate the textarea with the contents of an array even without looping.

obj.value = listings.join('\n');