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
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing background color of text box

    So I'm trying to change the background color of a textbox depending on how many characters are enter (putting it green/red depending on count), and I'm having a hell of a time.

    There are 50 different textbox IDs on the page (give or take, dynamically generated), each unique/sequentially numbered (id1, id2 ... id50).

    Now I'm not that good with Javascript, but this is what I can up with so far

    Code:
    function bgColoring()
    {
        if (document.getElementById(this.id).value.length >= 40)
        {
            document.getElementById(this.id).style.backgroundColor = "#66FF66";
        }
        if (document.getElementById(this.id).value.length >= 60)
        {    
            document.getElementById(this.id).style.backgroundColor = "#FFAAAA";
        }
    }
    With the elements like so...

    Code:
    <input type="text" id="id1" onkeypress="bgColoring();" />
    I was trying to use 'this.id' so I wouldn't have to name each of the IDs, since they are dynamically generated like I mentioned above.

    Thanks in advance for any help.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    If you give all your inputs with this event a class name, or some particular attribute (like size="67").
    you can ignore the ids, and just examine all the keyups when they bubble up to the the body.

    You can have as many as you like, mixed in with other elements and fields,
    as long as they are the only text inputs with the property or class name you specify.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
    <html lang= "en">
    <head> 
    <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8"> 
    <title> Event tails</title>
    
    <style type="text/css">
    input{background-color:#fff;color:#000;display:block;margin:1ex 1em;width:60em}
    input.length40{background-color:#0f0;color:#000;}
    input.length60{background-color:#f00;color:#fff;}
    </style>
    
    <script type= "text/javascript"> 
    onload= function(){
    	document.body.onkeyup= function(e){
    		e= window.event? event: e;
    		var who= e.target || e.srcElement;
    		if(who.size== '67'){			
    			var L= who.value.length;
    			if(L< 40) who.className= '';
    			else who.className= (L< 60)? 'length40': 'length60';			
    		}
    	}
    }
    </script> 
    </head>
    <body> 
    
    <form id="form_1">
    <fieldset>
    <legend>Color input by length</legend>
    <input type="text" size="67" value=" " name="input_1">
    <input type="text" size="67" value=" " name="input_2">
    <input type="text" size="67" value=" " name="input_3">
    <input type="text" size="67" value=" " name="input_4">
    <input type="text" size="67" value=" " name="input_5">
    <input type="text" size="67" value=" " name="input_6">
    <input type="text" size="67" value=" " name="input_7">
    <input type="text" size="67" value=" " name="input_8">
    <input type="text" size="67" value=" " name="input_9">
    <input type="text" size="67" value=" " name="input_10">
    <input type="text" size="67" value=" " name="input_11">
    <input type="text" size="67" value=" " name="input_12">
    <input type="text" size="67" value=" " name="input_13">
    <input type="text" size="67" value=" " name="input_14">
    <input type="text" size="67" value=" " name="input_15">
    <input type="text" size="67" value=" " name="input_16">
    <input type="text" size="67" value=" " name="input_17">
    <input type="text" size="67" value=" " name="input_18">
    <input type="text" size="67" value=" " name="input_19">
    <input type="text" size="67" value=" " name="input_20">
    </fieldset>
    </form>
    </body> 
    </html>
    Last edited by mrhoo; 02-03-2009 at 03:53 AM.

  • Users who have thanked mrhoo for this post:

    Voltar (02-03-2009)

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you a lot for that. I got what I wanted in the end done using that as a starting point.


  •  

    Posting Permissions

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