textarea wrapping problem

[lucasm]

I have a two framed window with a textarea for user input, and whenever text is typed in the textarea, the second frame is updated with a print preview based on the textarea. The problem I'm having is that when the user comes to the end of a line in the textarea it wraps to the next line, but the preview window (with a <TD> that contains the textarea's value) just continues on the same line, with a horizontal scroll bar - it doesn't go to the next line in the preview unless the user manually presses enter in the textarea. I have an update function that writes the textarea's value to the preview frame on each keypress in the textarea. How do I get the function to send a \n to the preview when the user gets to the end of a line in the textarea, instead of doing a 'hard' wrap which doesn't get written from the textarea.value to the preview's <TD>?

the textarea:
<TEXTAREA name = &quot;memotext&quot; Rows = &quot;10&quot; Cols = &quot;100&quot; Wrap = &quot;hard&quot; onKeyUp=&quot;updatePreview();&quot; STYLE=&quot;font:normal normal 10pt Arial&quot;><%=objRS(&quot;btDescription&quot%></TEXTAREA>

the update function:
function updatePreview() {
if(parent.frmprev.memospan) parent.frmprev.memospan.innerHTML = &quot;<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><TR HEIGHT=18><TD WIDTH=74><BR></TD><TD WIDTH=489 STYLE = \&quot;line-height:100%\&quot;><PRE><FONT SIZE=2 FACE=Arial COLOR=#000000>&quot; + document.memoform.memotext.value + &quot;</FONT></PRE></TD>&quot;;
}

 

[trollacious]

Have you tried wrap=&quot;virtual&quot;?

 

[lucasm]

I tried all the wrap options, it doesn't have anything to do with that - the textarea wraps fine, the problem is with the preview window's TD not wrapping.

 

[starway]

>>it doesn't go to the next line in the preview unless the user manually presses enter in the textarea

It should be this way. If user doesn't press [Enter] the text is considered to be one line.
If you want to make it look in preview similar to the textarea display, just insert a text into a table with limited width:

<table>
<tr><td width=&quot;100&quot;>
<script>updatePreview()</script>
</td></tr>
</table>

Change your &quot;[tt]<TD WIDTH=489[/tt]&quot; and make the cell width the same as textarea width.

 

[trollacious]

Your <pre> tag is what's causing the problem. Get rid of that and it shouldl wrap fine. Otherwise, you'll need to process the text and insert a <br> every so many characters before you write it out in the <td>.

 

[lucasm]

starway, I tried that but it just keeps stretching out on one line, is there something I can put in the td tag to stop it from growing horizontally?

trollacious, when I remove the pre tag the preview doesn't follow the textarea at all, it wraps on the preview way before the textarea (around 14 characters unless I don't press spacebar) and doesn't go to the next line when I press enter in the textarea.
If I make code so that it inserts a <br> after x characters will the amount of characters match up with the 100 cols in the textarea no matter what charaters I use? (l vs. L, etc.)
In other words, sometimes it will wrap before the textarea does because I can type a lot more l's than L's

 

[Tarwn]

What you will want to do is keep a javascript counter. Everytime you transfer a character to the preview window, incrememnt the counter. If the counter = 100 (starting with 1) then also insert a <br> here is the logic:

assign a global counter, start it with 1

assuming key up event being used:
1) If character is enter, add character to preview area and concatenate a <br> on it
2) Else add character to preview window
3) increment counter
4) if counter = 100 then
concatenate a <br> to your preview
counter = 1

Since this is doing a character count and the number of cols specified in the textarea is 100 (meaning 100 characters columns) you should match up.
-Tarwn ------------ My Little Dictionary ---------
Reverse Engineering - The expensive solution to not paying for proper documentation

 

[trollacious]

If you set your <td> with the same style as in the text area, that should show a similar output as your <textarea>. But, to get it to wrap, you'll either have to get rid of the <pre> tags, or figure a way to add <br>s to the text when it reaches a certain length.

 

[lucasm]

When I get rid of the pre tags it seems to wrap arbitrarily in the preview window, I'll try to figure that out just for curiousity, but first I'll try making a function to count and append <br>'s - after lunch.

 

[lucasm]

Tarwn, I don't understand how the textarea and preview are going to match up. I am using the same font in both, and when I say 100 cols in the textarea that doesn't mean that I can only type 100 characters in one row, 100 is the minimum. I have the textarea lined up over the preview frame, and I want them to stay lined up throughout (whether or not the user presses enter, and whatever characters they type). If I have the preview window wrap at 100 characters entered in the textarea, the text area may still only have 80 columns filled, for example. I guess I could have the textarea wrap at 100 characters also - whether or not the user has come to the end of the row, but that would be very limiting for the user.

 

[lucasm]

I figured out how to do it in CSS (word-wrap:break-word), so I don't have to use a function. Thanks for the help, though.