how can you highlight text multiple colors within textarea?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
vapoorize
Forum Newbie
Posts: 22
Joined: Mon Dec 17, 2007 5:35 pm

how can you highlight text multiple colors within textarea?

Post by vapoorize »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I was wondering what css tricks/methods you can use to highlight text multiple colors within the same textarea. I am aware of how to change attributes to the main textarea tag itself, but this changes the colors for the entire textarea, so thats 1 color for the whole textarea

I'm inspired by this page:
http://tinyurl.com/2ks2be

If you look at the source of html/css you will find:
CSS:
[syntax="css"]#search                     {height:60px; width:99.75%;}
#input                      {height:375px; width:99.75%; margin-top:10px;}
.smartField                 {position:relative; overflow:auto; border:1px solid #ccc; background:#f9f9f9;}
.smartField pre,
.smartField textarea        {font:100% "courier new",monospace; width:100%;}
.smartField pre             {z-index:1; color:#f9f9f9;}
.smartField textarea        {z-index:2; border:0; background:transparent; position:absolute; top:0; height:100%; min-height:100%; overflow:hidden;}

/* Highlighting ------------------------------------- */
b, i, u       {font-weight:normal; font-style:normal; text-decoration:none;}
#input b      {background:#fff000; color:#fff000;}
#input i      {background:#80c0ff; color:#80c0ff;}
#search b     {background:#aad1f7; color:#aad1f7;}
#search i     {background:#f9ca69; color:#f9ca69;}
#search i b   {background:#f7a700; color:#f7a700;}
#search i u   {background:#efba4a; color:#efba4a;} /* No RB equivalent */
#search b.g1  {background:#d2f854; color:#d2f854;}
#search b.g2  {background:#9ec70c; color:#9ec70c;}
#search b.g3  {background:#ecc9f7; color:#ecc9f7;}
#search b.g4  {background:#54b70b; color:#54b70b;}
#search b.g5  {background:#b688cf; color:#b688cf;}
#search b.err {background:#ff4300 !important; color:#ff4300 !important;}
HTML:

Code: Select all

<div id="body">
		<div id="search" class="smartField">
			<textarea cols="100" rows="3" tabindex="1">look +_++how it is (hi(ghligh)ted)</textarea>

		</div>
		<div id="input" class="smartField">
			<textarea cols="100" rows="10" tabindex="2"></textarea>
		</div>
	</div>
JS Script: http://tinyurl.com/35zctq


What puzzles me is that there are no tags inside the textarea itself and around the highlighted text, yet obviously there are css styles made for highlighting text. So how can you apply a style if you don't put tags around the text!??
I'm interested in seeing any js and/or html and/or css solution to this

-thanks


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Textarea tags themselves can only be given styles across their entirety. No variety can be done internally.
vapoorize
Forum Newbie
Posts: 22
Joined: Mon Dec 17, 2007 5:35 pm

Post by vapoorize »

yes I realized that through trying it feyd. I showed this example url for a reason, because they manage to pull it off, you can see that the highlighted text resides IN the textarea. And you see that it is highlighted. So in repeating myself, I"m asking Why?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

In all probability they have Javascript converting it to a live edit field.
vapoorize
Forum Newbie
Posts: 22
Joined: Mon Dec 17, 2007 5:35 pm

Post by vapoorize »

go on.. how is this done?
Most Helpful '05, '06
really?

what in the world is a "live edit field" ?
didn't find anything useful here:
http://www.google.com/search?hl=en&safe ... arch[quote][/quote]
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Look up TinyMCE, et al. They dynamically convert a textarea to a formatted field. Albeit to HTML, but one could easily modify them to do otherwise.
Post Reply