Tutorial on Manipulating Current Text Selection - by Ravi
Hi Shehan,
Here's a short tutorial for you with a working example to demonstrate exactly what you wanted to do with a <TextArea> element. I have even extended your idea and presented a demo to format any type of text selection anywhere in an HTML document.
Here's the HTML Source of My Example:
#----------[ Start Copying Here ]----------#
<html>
<head>
<title>Tutorial on Manipulating Current Text Selection - by Ravi [Minimalistix]</title>
<!--
Created: Sunday, December 05, 2004, 12:34:11 PM
Modified: Sunday, December 05, 2004, 1:59:21 PM
-->
<script type="text/javascript" language="javascript">
<!--
// -----------------------------------------------------------------+
// The following code demonstrates how to manipulate
// current Text Selection in a <TextArea> element and
// as a Bonus Tip in an HTML document's <Body> too !!
// -----------------------------------------------------------------+
// +---------=:[ by Ravi ]:=---=:[ Minimalistix ]:=---------+
// -----------------------------------------------------------------+
// underline () ;
// This function replaces the current text selection
// in the <TextArea> with the same text but delimited
// with pseudo HTML tags {UNDERLINE} and {/UNDERLINE}
// better known as BBCode (Bulletin Board Code) in BBs.
// These tags can then be either processed client-side using
// scripting languages like javascript or vbscript before the
// form submission or after it on the server-side using ASP,
// PHP, Perl, or Python etc. into the <u> and </u> HTML tags.
function underline ()
{
var selectn = document.selection.createRange () ;
if (selectn != null && selectn.text != "")
selectn.text = "{UNDERLINE}" + selectn.text + "{/UNDERLINE}" ;
}
// boldred () ;
// This function formats the currently selected text
// in the HTML document's body as Bold and Red in color
function boldred ()
{
var selectn = document.selection.createRange () ;
if (selectn != null && selectn.text != "")
{
if (selectn.text.charAt (0) == ' ')
selectn.pasteHTML ("<font style=\"color:#FF0000\">" + selectn.text + "</font>") ;
else
selectn.pasteHTML ("<font style=\"color:#FF0000\">" + selectn.text + "</font>") ;
}
}
//-->
</script>
</head>
<body style="text-align:center">
<textarea style="width:53%;height:20%;">
Girls, it's always better to keep your mouth shut and let ppl think you are a fool than to open it and remove all the doubt.
(Select the above text and press UNDERLINE to see the effect!)
</textarea>
<input type=button value="Underline" onclick="underline();"></input>
<div>Needing someone is like needing a parachute. If he isn't there the first time you need him, chances are you won't be needing him again.
(Select the above text and press BOLD-RED to see the effect!)
</div>
<input type=button value="Bold-Red" onclick="boldred();"></input>
<div style="color:#006600">(Please Note: TextArea doesn't have any HTML property associated with it. So, using
BOLD-RED on the "TextArea" will result in an Error. However, you can use UNDERLINE on the "Body" Text.)
</body>
</html>
#----------[ End Copying Here ]----------#
I've tested My Example on Internet Explorer 6.0 SP1.
I hope it helps you and whosoever else is interested in JavaScript.
I've tried to keep My Example as simple as possible but still in case you find any troubles
comprehending my source code you are most welcome with all your queries.
Ravi...
