?
Solved

Enter <br> instead of <p> in text area

Posted on 2003-11-05
24
Medium Priority
?
672 Views
Last Modified: 2010-04-09
I am using a rich text box and currently when I press return the html created is <p> and therefore leaves a line between the two lines of text, which I do not want.
I would like to know how to get a <br> to be created instead, just as this text box does.
Does anyone know how to do it?

Thanks
0
Comment
Question by:wjdashwood
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 6
  • 5
  • +2
24 Comments
 
LVL 9

Expert Comment

by:Dang123
ID: 9687675
wjdashwood,

Looking at the source for this page the asnwer text box has the following syntax

<textarea name="body" rows=15 cols="" wrap=soft class=formDataTextarea></textarea>


try adding the wrap=soft to you text box

Dang123
0
 

Author Comment

by:wjdashwood
ID: 9687727
how do I do that when the code for the textbox is
<iframe id="edit" width="100%" height="57%"></iframe>
it doesn't seem to have the "wrap" property.
Thanks
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9687757
>>  the code for the textbox is <iframe

An iframe is not a textbox. How are you entering the text into the iframe?
0
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9688871
Hi,

   depends on how you are entering text and in where.  From what you say, it is reading the enter key (13) as a crlf.  One solution would be to capture the keystrokes and the enter key with a  "<br>"

  post a url

Vinny
0
 

Author Comment

by:wjdashwood
ID: 9694056

Sorry I'm a bit new at this, I thought that was all you needed. Here is the code I am using. Its very basic at the moment but you get the idea.

<html>
<head>
<script>
function FormatText(command, option) {
            document.getElementById("edit").contentWindow.focus();
            document.getElementById("edit").contentWindow.document.execCommand(command, false, option);
            document.getElementById("edit").contentWindow.focus();
}
</script>
</head>
<body scroll=no onLoad='frames.edit.document.designMode = "On"'; rightmargin="0" bottommargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<a href="javascript:" onClick="FormatText('bold','')" onmouseover="bold.src='images/buttons/sbold.gif'" onmouseout="bold.src='images/buttons/bold.gif'"><img name="bold" border=0 src="images/buttons/bold.gif">&nbsp;Make text bold</a>

<iframe id="edit" width="100%" height="57%"></iframe>
</body>
</html>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9694191
>>I would like to know how to get a <br> to be created instead, just as this text box does.
Press Shift - Enter
0
 

Author Comment

by:wjdashwood
ID: 9694319
I know how to do it myself, but I want it so that someone who is using it can just press enter and this will happen automatically. I don't want to have to write a message telling them to press shift and enter, this is going to be tested by my mum. If I told her to press shift she wouldn't have the slightest idea what I was going on about :>
0
 
LVL 33

Accepted Solution

by:
knightEknight earned 1350 total points
ID: 9695135
Here is my best shot at it:

<html>
<head>
<script>

 function FormatText(command, option)
 {
   var edit = document.getElementById("edit").contentWindow;

   edit.focus();
   edit.document.execCommand(command, false, option);
   edit.focus();

   return false;
 }

 function onKeyUpHandler(e)
 {
   var edit = document.getElementById("edit").contentWindow;
   var event = e ? e : edit.event;

   if ( event.keyCode==13 )
   {
      edit.document.body.innerHTML = edit.document.body.innerHTML.replace(/<p/gi,"<br").replace(/<\/p>/gi,"").replace(/^<br>/gi,"").replace(/&nbsp;$/gi,"");
   }
 }


 function onLoadHandler()
 {
   frames.edit.document.designMode="On";
   document.getElementById("edit").contentWindow.document.onkeyup = onKeyUpHandler;
 }


</script>
</head>

<body scroll=no onLoad="onLoadHandler();" rightmargin="0" bottommargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<a href="#" onClick="return FormatText('bold','');" onmouseover="bold.src='images/buttons/sbold.gif'" onmouseout="bold.src='images/buttons/bold.gif'"><img name="bold" border="0" src="images/buttons/bold.gif" />&nbsp;Make text bold</a>
<iframe id="edit" width="100%" height="57%" ></iframe>
</body>
</html>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9695142
here is my best shot at it:


<html>
<head>
<script>

 function FormatText(command, option)
 {
   var edit = document.getElementById("edit").contentWindow;

   edit.focus();
   edit.document.execCommand(command, false, option);
   edit.focus();

   return false;
 }

 function onKeyUpHandler(e)
 {
   var edit = document.getElementById("edit").contentWindow;
   var event = e ? e : edit.event;

   if ( event.keyCode==13 )
   {
      edit.document.body.innerHTML = edit.document.body.innerHTML.replace(/<p/gi,"<br").replace(/<\/p>/gi,"").replace(/^<br>/gi,"").replace(/&nbsp;$/gi,"");
   }
 }


 function onLoadHandler()
 {
   frames.edit.document.designMode="On";
   document.getElementById("edit").contentWindow.document.onkeyup = onKeyUpHandler;
 }


</script>
</head>

<body scroll=no onLoad="onLoadHandler();" rightmargin="0" bottommargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<a href="#" onClick="return FormatText('bold','');" onmouseover="bold.src='images/buttons/sbold.gif'" onmouseout="bold.src='images/buttons/bold.gif'"><img name="bold" border="0" src="images/buttons/bold.gif" />&nbsp;Make text bold</a>
<iframe id="edit" width="100%" height="57%" ></iframe>
</body>
</html>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9695155
sorry about the double-post ... i got a server error the first time.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9695163
I thought the other one was your second-best shot at it :-)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9695230
Isn't there someway to replace the event.keyCode=13 with (event.keyCode==16 + event.keyCode=13) automatically?
0
 

Author Comment

by:wjdashwood
ID: 9695236
thanks knightEknight. Its almost what I wanted. Is there a way to prevent the delay?

Can anyone else come up with a better solution?

If not I'll give the points to knightEknight. I'll check up again in about a day.

Thanks again.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9695280
I agree - knightEknight should get them. I'm curious about the delay as well - I thought that altering the way the replace is handled would take care of it? What do you think?
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9695338
Hi all,

since KeK already came up with the replace, I figured I'd approach it from a different angle.  Interestingly tough, the code itself doesn't take effect until after the next keypress.  I left the alert in because I felt it might be enlightening.


function addBr()
{
  frames.edit.document.body.innerHTML += '<br />'

alert(frames.edit.document.body.innerHTML)
}
</script>
</head>
<input type='button' value='Add BR' onclick="addBr()">

Vinny
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9695364
Hi,
 
  No, I don't think that would make much of a difference.  The delay seems to be built into the iframe itself (see the post above), possibly because of the nature of the 'about:blank' doc.  What may be the only way to do it without delay is to append Scripts to the iframe's document for key handling, or set the iframe's src to a document that 'includes' a *.js file that has the functions.

Vinny
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9695675
george, you can do this:  if (event.keyCode==16 || event.keyCode=13)
is that what you mean?  (what is 16 anyway? 10 is \r and 13 is \n but I don't remember what 16 is.)
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9695828
oops, typo:  if (event.keyCode==16 || event.keyCode==13)
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9695853
I see what you mean about the delay now, I'll work on it a bit, but I don't know how much difference this will make.  There are many quirks associated with this whole think IMO.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9695977
hmm, I couldn't get rid of the delay.  Perhaps others can build on what I have offered so far since it isn't really ready for prime-time yet.  I hope it helps.  
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9696001
16 is the Shift Key - if you press Shift-Enter in the iframe edit box, it gives you a single line return.
So i was hoping that if we could trap the Enter Key, and somehow replace it with Shift+Enter, we'd be okay...
In other words:
replace event.keyCode=13 with "event.keyCode==16 AND event.keyCode=13"


Here's a simple script for event.key values:

<html>
<head>
<script type="text/javascript">
if ('1'[0]) document.captureEvents(Event.KEYDOWN);
document.onkeydown = function(e) {
if (!e && window.event) e={which:event.keyCode};
window.status = 'Key pressed: '+e.which+', Key value: '+String.fromCharCode(e.which);
return true;
}
</script>
</head>
<body>
Hit a key and watch the status bar
</body>
</html>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9697023
oh!  i see what you mean!  well, you could always fire the event handler explicitly, passing in an event object with a 16 keyCode.  maybe something like this (not tested):

function onKeyUpHandler(e)
 {
   var edit = document.getElementById("edit").contentWindow;
   var event = e ? e : edit.event;

   if ( event.keyCode==13 )
   {
       event.keyCode = 16;
       return !onKeyUpHandler(event);
   }
   else
       return true;  // or maybe this should be false ???
 }


still, I think there is a timing issue with this approach.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9697222
oops, that isn't quite right anyway ... the event needs to be fired, not thru the handler:


function onKeyUpHandler(e)
 {
   var edit = document.getElementById("edit").contentWindow;
   var event = e ? e : edit.event;

   if ( event.keyCode==13 )
   {
       event.keyCode = 16;
       edit.document.onkeyup(event);
       event.keyCode = 13;
   }
 }
0
 

Author Comment

by:wjdashwood
ID: 9700922
Thanks for the all the help. If anyone ever does figure a simple way of getting this done you could send it to me: senda_letter@hotmail.com
For now I shall use the one suggested by knightEknight.
Thank you
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question