Replacing TextArea´s Selected Text...

[KenA]

Hi. Suppose I have a textarea with some text in it and after i make a text
selection I want to replcae the selected text with for example the same text
but with anothet color. I have the folowing html page:

<form name="Form1">
<textarea name="txtArea1" cols="40" rows="4"></textarea>
</form>
<script type="text/javascript">
document.Form1.txtArea1.value = "Now go ahead Now go ahead";
</script>

In case the browser is Gecko I can do the following:

<script type="text/javascript">

var color = "#FF0000";

function DoSelectionGecko()
{
var s = this.Form1.txtArea1.value;
//alert( "Before selection: " + s.substring( 0,
this.Form1.txtArea1.selectionStart) );
//alert( "From selection: " +
s.substring(this.Form1.txtArea1.selectionStart) );
//alert( "After selection: " +
s.substring(this.Form1.txtArea1.selectionEnd) );
//alert( "Selected: " + s.substring( this.Form1.txtArea1.selectionStart,
this.Form1.txtArea1.selectionEnd ) );

rng = s.substring( this.Form1.txtArea1.selectionStart,
this.Form1.txtArea1.selectionEnd )

var newRng = "<span style=color:'" + color + "';>" + rng + "</span>"

var txtBefore = s.substring( 0, this.Form1.txtArea1.selectionStart);
var txtFrom = s.substring(this.Form1.txtArea1.selectionStart);
var txtSelected = s.substring( this.Form1.txtArea1.selectionStart,
this.Form1.txtArea1.selectionEnd );

if( txtSelected.length>0 )
this.Form1.txtArea1.value = txtBefore + txtFrom.replace( rng, newRng );

};

function DoSelectionIE()
{
var s = this.Form1.txtArea1.value;

var selection = document.selection;

alert( event.clientX );
alert( event.clientY );

if( selection != null )
{
rng = selection.createRange();
rng.moveToPoint(event.clientX, event.clientY);
rng.pasteHTML( "<span style=color:'" + color + "';>" + rng.htmlText +
"</span>" );
}

//alert( rng.text );
};


if( document.getSelection )
{
if( window.Event )
{
document.captureEvents( Event.MouseUp );
}
document.onmouseup = DoSelectionGecko;
}
else if( document.selection && document.selection.createRange )
{
if( window.Event )
{
document.captureEvents( Event.MouseUp );
}
document.onmouseup = DoSelectionIE;
}
else
{
alert( "Not Supported in your Browser!" );
}

</script>

Well, the problem is with IE, since the selected text is NOT in the body of
the doc, but instead it´s inside the textArea, the rng.pasteHTML is not
working, probably because it´s targeting the body instead of the textarea.

Any tips on how to accomplish that?

 

[clintonG]

Client-side JavaScript is required. You can get JavaScript(s) that will get
as close as possible and enable your form to function exactly as you are
seeking from the JavaScript FAQ [1] but you're probably going to have to
hire somebody to wire everything up and add the or change your requirements
as this objective is not too easy to do using JavaScript and would be much
easier with a trip back to the server which would return the text with new
style applied.

--
<%= Clinton Gallagher, "Twice the Results -- Half the Cost"
Architectural & e-Business Consulting -- Software Development
NET (e-mail address removed)
URL http://www.metromilwaukee.com/clintongallagher/

[1] http://developer.irt.org/

 

[Steve Easton]

You are making it waaaaaaay to hard.
Simply create an onchange or onselect function to swap the inline style for the text box.

Here's an example of an onmouseover and onmouseout style swap that will change the text color
between red and blue.

<style type="text/css">
..mycolora{
color: red;
}
..mycolorb{
color: blue;
}
<style>

The style script goes between the head tags

and the following would go in the opening tag for your textarea like so.
Note the ' that surround 'colora' and 'colorb in addition the parens " that enclose the entire
statement
"this.className='colora'"

<textarea class="mycolor" onmouseover="this.className='colora'"
onmouseout="this.className='colorb'">



--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[Steve Easton]

Rats.

I forgot to change the mouseover style names. I also added a defalult for mycolor

<style type="text/css">
..mycolor{
color: green;
}
..mycolora{
color: red;
}
..mycolorb{
color: blue;
}
<style>

The style script goes between the head tags

and the following would go in the opening tag for your textarea like so.

<textarea class="mycolor" onmouseover="this.className='mycolora'"
onmouseout="this.className='mycolorb'">

Note the hyphens ' that surround 'mycolora' and 'mycolorb' in addition the parens " that enclose
the entire
statement "this.className='colora'"


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[clintonG]

If its so eeeeeeasy as you claim why did you not bother to explain how to
replace the selected text with new text?

--
<%= Clinton Gallagher, "Twice the Results -- Half the Cost"
Architectural & e-Business Consulting -- Software Development
NET (e-mail address removed)
URL http://www.metromilwaukee.com/clintongallagher/

 

[clintonG]

I need a reading comprehension lesson today as you are right. After
re-reading -- yet again -- the OP doesn't want to replace the selected text
but just change the color.

--
<%= Clinton Gallagher, "Twice the Results -- Half the Cost"
Architectural & e-Business Consulting -- Software Development
NET (e-mail address removed)
URL http://www.metromilwaukee.com/clintongallagher/

 

[KenA]

Hi All, well, it´s not that easy but i´m sure i´m on the right path. As I
showed in my code I made it with Geckos browsers, but the issue remains on
IE. IE is more operating system depending than Geckos. As you could notice I
solved the problem for Geckos with pure javascript and some DOM usage, but
IE uses OS functionality like object.execCommand, replaceHTML,
createRange,etc. The main issue with these IE built-in methods is that by
using then I´ll not have control over the generated html code, eg instead of
applying a 'font' tag with the object.execCommand I´d rather do it by hand
and generate valid XHTML tag like: <span style=color:#somecolor;>some
word</span>. Another example is when I press 'enter' in the textarea, IE
breaks the line by using the <p></p> tag while Geckos uses <br>, of course,
a good user could press shift+enter in IE and the <br> tag will be there,
plus I don´t want any of them, but I want <br /> which is XHTML.

Well, I´m trying to solve my issues, part by part. I too thought it would by
easy in the beginning but instead it became a pretty hard task to
accomplish, eg: to create a cross-browser html/xhtml editor. I´m looking in
the various free html editors we can find on the web, but most of them are
using the built-in IE methods, thus generating 'not so good' html code ...
the one that is doing a good job is: http://www.xstandard.com/ but it´s
ActiveX based. I want to do a more javascript based one and just to use
server-side technology for image uploads, etc [these I can easily do with C#
and Asp.Net]

 

[Steve Easton]

You can replace html in the IE browser using simple javascript only and using:
document.all.elementid.InnerHTML = "<font color=green>text here</font>";

elementid = the id assigned to the element i.e. id="elementidname"

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[Steve Easton]

Additionally, here is a script that will "manage" the selected text:

<SCRIPT LANGUAGE="JavaScript" defer>
var parentwin = external.menuArguments;
var doc = parentwin.document;
var sel = doc.selection;
var rng = sel.createRange();
var str = new String(rng.text);

rng.execCommand("BackColor",0,"YELLOW");

</SCRIPT>


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[Jon Spivey]

Hi Ken,

Check out this article if you can use asp.net
http://aspnet.4guysfromrolla.com/articles/102004-1.aspx
The product is mentions is excellent and free.