Link to home
Start Free TrialLog in
Avatar of DBB
DBB

asked on

formatting text input into textarea

Hi,

I need to let users input text into a textarea for display and be able to add formatting to it.

What's the best way to achieve this?

Thanks

Dbb
Avatar of pinaldave
pinaldave
Flag of India image

you can use any kind of CSS formtting with Textarea.
Example would be
textarea
{
font-family:monospace;
font-size: 12px;
color : #333300;
font-weight: normal;
}
SOLUTION
Avatar of jrram
jrram
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Text area strips out even CR, so all text run together.  Text area not designed for formatted text.  To make new paragraph, need to tell users to put in <BR> <BR> into text, or use <P>text here</P> around text.  too much pain, people not want to do this, text area not what you want to use if you want formatted text from user. Try rich text box.
What are they going to do with the text after they format it?
Avatar of DBB
DBB

ASKER

Hi all,

they are going to insert it into a guestbook like page.

so need a way to scan the text and insert <p>tags where the user has started a new paragraph.

not really that fussed on bold etc but would be nice.

thanks

Dbb
Something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function go() {
var text = "<p>" + document.getElementById('ta').innerHTML.replace(/\r\n/,"</p><p>") + "</p>";
alert(text);
}
</script>
</head>
<body>
<textarea id="ta" rows="10" cols="80"></textarea>
<input type="button" value="show" onclick="go()" />
</body>
</html>
Avatar of DBB

ASKER

Yeah like that,

thanks Kiddanger.

just tried the code, it only seems to put the <p> tags around the first 2 paragraphs.

also doesn't seem to function in firefox.

any suggestions?

thanks

Dbb
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of DBB

ASKER

Thanks,

just need it now to not allow empty <p></p> tags.

from Kiddanger's code:-


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
function go() {
  var el =     document.all ? document.getElementById('ta').innerHTML : document.getElementById('ta').value;
  var text = "<p>" + el.replace(/\n/g,"</p><p>") + "</p>";
  text = text.replace(/<p><\/p>/g,"");
  alert(text);
}
</script>
</head>
<body>
<textarea id="ta" rows="10" cols="80"></textarea>
<input type="button" value="show" onclick="go()" />
</body>
</html>

this works in Firefox but not in ie

how do I get it to work in ie and onsubmit just to replace the original text (not alert it)

thanks

Dbb

ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
What you posted may have worked in FF but it didn't when I tested it.  However, the issue is IE returns:

%0D%0A a.k.a CRLF

FF returns:

%0A a.k.a. LF

Removing only \n works for FF but not for IE because it still has \r so I had to split that part up also.