add <br> from textarea

Forum Moderators: open

Message Too Old, No Replies

add <br> from textarea

WhosAWhata

3:23 am on Jun 4, 2004 (gmt 0)

if you have a script like this

how do you add the <br> to the div?

as in if i type
h
e
l
l
o

it shows up as
h e l l o

how can i add the <br> or equivalent

Bernard Marx

8:08 am on Jun 4, 2004 (gmt 0)

..Type <br> into the textarea?

Rambo Tribble

1:18 pm on Jun 4, 2004 (gmt 0)

I'm afraid your description doesn't really register. Could you give a more step-wise account of what you want?

HelenDev

1:33 pm on Jun 4, 2004 (gmt 0)

I totally don't know much javascript but when I come across this sort of thing in php I do something like this...


str_replace("\r\n", "<br />", $enquiry);

I believe the javascript equivalent is something like


str.replace("\r\n", "<br />");

please forgive me if it doesn't work :)

Bernard Marx

1:58 pm on Jun 4, 2004 (gmt 0)

I think he means "What do I type into the textarea to get the effect in the div".

He says that if he types in

a
b
c

he gets a b c. That's due to the way a browser interprets HTML.
I suggested typing: a<br>b<br>c. HelenDev's is much better, but I'd amend it to:

document.form.text.value.replace(/\r\n�\n/g,"<br />")

because I think non-windows OS's use \n for line-breaks.
(actually, "\n" might do the trick equally well all round)
[Replace the broken pipe � as usual]

Rambo Tribble

2:57 pm on Jun 4, 2004 (gmt 0)

Okay. I'm wondering how the captured string is formed when it is passed by the form to JavaScript, though. It may already have the carriage return/line feeds stripped, in which case it will need to be slice()'ed, the <br />'s inserted, then reconstituted.

Bernard Marx

3:58 pm on Jun 4, 2004 (gmt 0)

I imagine that the textarea.value is a text string including line-break and tab chars. When processed as HTML in the div, line-breaks become whitespace, and multiple whitespaces compress to single. So it's a matter of replacing the right chars with the right HTML codes. This demo seems to work OK. I've added a bit so that multiple spaces in the textarea are still represented in the div (with   s). Since adding this, the / in the <br /> is giving me problems, so I've returned to an HTML <br>.

<html><head>
<title>WriteDiv</title>
<style>#targdiv{font-family:monospace;}</style>
<script>
function fillTarg()
{
 var TARG = document.getElementById("targdiv")
 var AREA = document.getElementById("area")
 TARG.innerHTML = AREA.value.replace(/\r\n[red][b]�[/b][/red]\n/g,"<br>").replace(/\s/g,"&nbsp;")
}
</script></head><body> <textarea id="area" rows=8 cols=30 onKeyUp="fillTarg()"></textarea>
 <div id="targdiv"></div>
</body></html>