SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change back color of textbox when text is present??

    Does anyone know if it is possible to change the color of a textbox when text is present? I have a .net page that returns info from a database and populates textboxes. I would like to change the color of the textbox if text is present. I cannot use the onfocus event because a script is entering the text not the user. Anyone have any ideas??

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2005
    Location
    Michigan, USA
    Posts
    434
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If your script is putting in the initial values, you can apply a style at that point if the value is not empty. Then maybe try onchange to call a function which checks the value of the text element.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    You can have a script that runs after the page is loaded.
    If there's just one text box you can easily do it this way.

    Code Javascript:
    var textbox = document.getElementById('myTextbox');
    if (textbox.value > '') {
        textbox.className = 'hasText";
    }

    If there are multiple text boxes then an easy solution depends on the structure you have for them.

    Show us the structure of your text boxes and we'll show you the easy way to work with them.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies. I do have more than one textbox, there are 15 on the page. All of them are setup similiar to this:

    Code:
    <tr>
                        <td class="spacercell2">
                             &nbsp;
                        </td>
                        <td class="rightcell">
                             <asp:Label ID="compUpLabel" runat="server" Text="Company:" Width="100" />
                        </td>
                        <td class="leftcell">
                             <asp:TextBox ID="compUpTextBox" runat="server" Width="150" CssClass="redbox" />
                        </td>
                        <td class="spacercell3">
                             &nbsp;
                        </td>
                    </tr>
    I appreciate the help

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    If you place an identifier on the table, you can use the following.
    Be sure though to use an identifier that's more accurate than myTable, such as one that indicates what it contains.

    Code Javascript:
    var container = document.getElementById('mytable');
    var inputs = container.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        // Make sure that only text inputs are affected
        if (inputs[i].getAttribute('type') == 'text') {
            if (inputs[i].value > '') {
                inputs[i].className = 'hasText';
            }
        }
    }

    If you want to do all inputs on the page, you can use the the following for the container

    Code Javascript:
    var container = document.body;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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