...

View Full Version : how to change the color of the text inside the input textbox



che_anj
12-09-2008, 10:22 AM
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

Philip M
12-09-2008, 10:42 AM
Llike this:-


<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

abduraooft
12-09-2008, 11:03 AM
<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

che_anj
12-09-2008, 11:18 AM
it needs to be onclick like if i have the of button having the value of the name of colors

e.g.


<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..


<input type="text" > <--- the color of the text inside the textbox will change.

Thanks guys..

abduraooft
12-09-2008, 11:23 AM
<input type="button" onclick="change(this);" value="Blue" name="blue">
<input type="button" onclick="change(this);" value="Green" name="green">

<input type="text" id="myinput">

function change(obj){
var input=document.getElementById('myinput');
input.style.color=obj.getAttribute('name');// or obj.value;
}

che_anj
12-09-2008, 11:29 AM
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.

che_anj
12-09-2008, 11:54 AM
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



<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>

Philip M
12-09-2008, 01:41 PM
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) .....


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum