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 8 of 8
  1. #1
    Regular Coder che_anj's Avatar
    Join Date
    Aug 2006
    Location
    Philippines
    Posts
    157
    Thanks
    12
    Thanked 3 Times in 3 Posts

    how to change the color of the text inside the input textbox

    Hi,

    I just want to ask how to change the color of the text in input textbox by using the javascript onclick function.


    thanks for your help guyz.. God bless

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,924
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Llike this:-

    Code:
    <input type = "text" name = "txt1" id = "txt1" size = "20" onblur = "changeCol(this)">
    
    <script type = "text/javascript">
    
    function changeCol(which) {
    which.style.background = '#FF0000';
    which.style.color = '#0000FF';
    }
    </script>


    "The only function of economic forecasting is to make astrology look respectable". - J.K.Galbraith
    Last edited by Philip M; 12-09-2008 at 10:45 AM.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <input type = "text" name = "txt1" id = "txt1" size = "20" onblur = "changeCol(this)">
    Shouldn't it be onclick?

    PS: @che_anj, all standard browsers support the CSS pseudo property :focus
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Regular Coder che_anj's Avatar
    Join Date
    Aug 2006
    Location
    Philippines
    Posts
    157
    Thanks
    12
    Thanked 3 Times in 3 Posts
    it needs to be onclick like if i have the of button having the value of the name of colors

    e.g.
    Code:
    <input type="button" onclick="" value="Blue" name="blue">
    <input type="button" onclick="" value="Green"  name="green">
    when I click the button the color of the text inside the textbox will change..
    Code:
    <input type="text" >      <--- the color of the text inside the textbox will change.
    Thanks guys..

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <input type="button" onclick="change(this);" value="Blue" name="blue">
    <input type="button" onclick="change(this);" value="Green"  name="green">
    Code:
    <input type="text" id="myinput">
    Code:
    function change(obj){
    var input=document.getElementById('myinput');
    input.style.color=obj.getAttribute('name');// or obj.value;
    }
    Last edited by abduraooft; 12-09-2008 at 11:26 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder che_anj's Avatar
    Join Date
    Aug 2006
    Location
    Philippines
    Posts
    157
    Thanks
    12
    Thanked 3 Times in 3 Posts
    I try it, but the color of button text was change, I'd like to change the color of the text in the textbox when clicking the button..


    tnx.

  • #7
    Regular Coder che_anj's Avatar
    Join Date
    Aug 2006
    Location
    Philippines
    Posts
    157
    Thanks
    12
    Thanked 3 Times in 3 Posts
    Hi I tried this, it works in changing the color but the problem is that it will read first from Blue, Green to Red. Do you have any idea how to fix this.. thanks

    Code:
    <form name="myForm" title="myForm">
    <INPUT NAME="myButton" TYPE="button" VALUE="Blue" onClick=valChange()>
    <INPUT NAME="myButton" TYPE="button" VALUE="Green" onClick=valChange()>
    <INPUT NAME="myButton" TYPE="button" VALUE="Red" onClick=valChange()>
    <input type = "text" name = "txt1" id = "txt1" size = "20" >
    <script type="text/javascript">
    function valChange(){
    		
         if(document.myForm.myButton.value="Blue"){    
         document.myForm.txt1.style.color='#0000FF';	
         alert("color is blue");  
    	   
    	}
    	
       if(document.myForm.myButton.value="Green"){    
         document.myForm.txt1.style.color='#208A0B';	
         alert("color is green");
        
        }
        if(document.myForm.myButton.value="Red"){    
         document.myForm.txt1.style.color='#B92103';	
         alert("color is red");
        
        }
        
    	}
    </script>
    </form>

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,924
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by abduraooft View Post
    Shouldn't it be onclick?

    PS: @che_anj, all standard browsers support the CSS pseudo property :focus
    I assumed that the user wanted to change the color after the box had been filled in, perhaps to show that an entry had been made.

    But now it seems he wants button(s) .....

    Code:
    <input type = "text" name = "txt1" id = "txt1" size = "20" ><br>
    <input type = "button" name = "but1" id = "but1" value = "Change color of text in box to Blue" onclick = "changeColBlue()"><br>
    <input type = "button" name = "but2" id = "but2" value = "Change color of text in box to Red" onclick = "changeColRed()"><br>
    <input type = "button" name = "but3" id = "but3" value = "Change color of text in box to Green" onclick = "changeColGreen()"><br>
    
    <script type = "text/javascript">
    
    function changeColBlue() {
    document.getElementById("txt1").style.color = "#0000FF";
    }
    function changeColRed() {
    document.getElementById("txt1").style.color = "#FF0000";
    }
    function changeColGreen() {
    document.getElementById("txt1").style.color = "#00FF00";
    }
    
    </script>
    Last edited by Philip M; 12-09-2008 at 01:58 PM.

  • Users who have thanked Philip M for this post:

    che_anj (12-09-2008)


  •  

    Posting Permissions

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