www.webdeveloper.com
Results 1 to 4 of 4

Thread: Text box colour change

  1. #1
    Join Date
    May 2012
    Posts
    7

    Text box colour change

    Hi there just wondering if its possible to make a text box in java script and then for that box 2 change colour when the user inputs something. For example if they enter 3 it will turn green but if they enter anything else then it will turn red.
    Thanks

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .red {
      background-Color:red;
    }
    
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Color(){
     var args=Color.arguments,obj=args[0],z0=2;
     for (;z0<args.length;z0+=2){
      if (obj.value==args[z0]){
       obj.style.backgroundColor=args[z0+1];
       return;
      }
     }
     obj.style.backgroundColor=args[1];
    }
    /*]]>*/
    </script></head>
    
    <body>
    <input class="red" name="fred" onblur="Color(this,'red','3','green','4','blue');" onkeyup="Color(this,'red','3','green','4','blue');"/>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    See, if this helps!
    HTML Code:
    <!doctype html>
    <html>
    <head>
        <title>Creating text box dynamically!</title>
    </head>
    <body>
        <h3>Even numbers are green &amp; Odd ones turn red!</h3>
        <script>
            var textBox = document.createElement('input');
            textBox.setAttribute('placeholder','Enter a number');
            textBox.setAttribute('id','text');
            textBox.setAttribute('onkeyup','Check()');
            document.body.appendChild(textBox);
            
            var Check = function () {
                textBox = document.getElementById('text');
                
                switch((textBox.value) &#37; 2) {
                    case 0:
                        textBox.style.color = 'green'; // works if textBox.value is 'even'
                        break;
                    default:
                        textBox.style.color = 'red';  // works if textBox.value is 'odd'
                        break;
                }
            }
        </script>
    </body>
    </html>
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

  4. #4
    Join Date
    May 2012
    Posts
    7
    Thanks for that guys but i found one that dose work and i think will fit better

    Code:
    <html>
    <head>
    <title>
    </title>
    <script type="text/javascript">
    function changecolour() {
    var val = document.getElementById('mytext').value;
    if (val == 3) {
    	document.getElementById('mytext').style.backgroundColor = 'green';
    	}
    	else {
    	document.getElementById('mytext').style.backgroundColor = 'red';
    	}
    }
    </script>
    </head>
    <body>
    <form name="form1" id="form1" action="#">
    <input type="text" id="mytext" name="mytext" value="" onkeyup="changecolour()" >
    </form>
    </body>
    </html>
    This will work better so now i can have 1+1 for example in html and hten use css to postion it and then javscrtipt for the text box. But thank you very much for the help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles