Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    glz
    glz is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    57
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question how can you highlight text multiple colors within textarea?

    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:
    Code:
    #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:
    <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
    Last edited by glz; 12-21-2007 at 11:36 PM.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    A textarea is for plain text without any special markup. If you want to apply more than one style to different parts of the content then you can't use a text area. Why would you want to style what someone types in differently depending on what they type anyway?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by felgall View Post
    Why would you want to style what someone types in differently depending on what they type anyway?
    Imagine your web editor as a textarea. =P


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •