Solved

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

Posted on 2003-11-05
24
651 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
  • 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

861 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