Solved

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

Posted on 2003-11-05
24
625 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

747 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now