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

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
wjdashwoodAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dang123Commented:
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
wjdashwoodAuthor Commented:
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
seanpowellCommented:
>>  the code for the textbox is <iframe

An iframe is not a textbox. How are you entering the text into the iframe?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

VincentPugliaCommented:
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
wjdashwoodAuthor Commented:

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
seanpowellCommented:
>>I would like to know how to get a <br> to be created instead, just as this text box does.
Press Shift - Enter
0
wjdashwoodAuthor Commented:
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
knightEknightCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
knightEknightCommented:
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
knightEknightCommented:
sorry about the double-post ... i got a server error the first time.
0
seanpowellCommented:
I thought the other one was your second-best shot at it :-)
0
seanpowellCommented:
Isn't there someway to replace the event.keyCode=13 with (event.keyCode==16 + event.keyCode=13) automatically?
0
wjdashwoodAuthor Commented:
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
seanpowellCommented:
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
VincentPugliaCommented:
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
VincentPugliaCommented:
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
knightEknightCommented:
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
knightEknightCommented:
oops, typo:  if (event.keyCode==16 || event.keyCode==13)
0
knightEknightCommented:
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
knightEknightCommented:
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
seanpowellCommented:
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
knightEknightCommented:
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
knightEknightCommented:
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
wjdashwoodAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.