Solved

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

Posted on 2003-11-05
24
659 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 450 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

Enroll in June's Course of the Month

June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

690 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