Change textbox text color with javascript

Question

I have a textbox.When I click this I want to change text color style with javsacript.Before this I made succesfully this.When someone click the textbox textbox clear inner when blur textbox become old version.This code works for me now

<input id="kullanici_adi_text" type="text" name="kullanici_adi_text"    value="Kullanıcı İsmini Giriniz..." onfocus="if(this.value=='Kullanıcı İsmini Giriniz...') {this.value='';}  onblur="if(this.value==''){this.value='Kullanıcı İsmini Giriniz...'}"/>

But I want to change text color also and textbox border size when someone focus at this.The code is not working

<input id="kullanici_adi_text" type="text" name="kullanici_adi_text" value="Kullanıcı İsmini Giriniz..." onfocus="if(this.value=='Kullanıcı İsmini Giriniz...') {this.value=''; document.getElementById('kullanici_adi_text').style.color = 'blue';}"  onblur="if(this.value==''){this.value='Kullanıcı İsmini Giriniz...'; document.getElementById('kullanici_adi_text').style.color = #fff; }"/>

You appear to be missing quotes around your hexcode colour. You have this: document.getElementById('kullanici_adi_text').style.color = #fff; But it should be like this: document.getElementById('kullanici_adi_text').style.color = '#fff'; — Henders
– Henders, Commented Oct 23, 2015 at 16:26

TSV · Accepted Answer · 2015-10-23 16:30:27Z

2

You should use quotas for color:

<input id="kullanici_adi_text" type="text"
   name="kullanici_adi_text"
   value="Kullanıcı İsmini Giriniz..." 
onfocus="if(this.value=='Kullanıcı İsmini Giriniz...')
    {this.value='';
     this.style.color = 'blue';}"  
onblur="if(this.value=='')
    {this.value='Kullanıcı İsmini Giriniz...';
     this.style.color = '#ff0000';}"/>

And as a recomendation - it is better to sepatate javascript code from markup.

answered Oct 23, 2015 at 16:30

TSV

7,6681 gold badge33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tarık Akyüz Over a year ago

how can I give rgba it doesnt work => this.style.color='rgba(69,69,69,0.3)';

TSV Over a year ago

Please check a fiddle - jsfiddle.net/4humesk7/1 - this works like a charm for me.

Djeroen · Accepted Answer · 2015-10-23 16:33:41Z

2

this would work
<input id="kullanici_adi_text" type="text" onfocus="myFunction()">

<script>
function myFunction() {
document.getElementById("kullanici_adi_text").style.color = "#ff0000";
document.getElementById("kullanici_adi_text").style.color = "magenta";
document.getElementById("kullanici_adi_text").style.color = "blue";
document.getElementById("kullanici_adi_text").style.color = "lightblue";
}
</script>

edited Oct 23, 2015 at 16:33

answered Oct 23, 2015 at 16:27

Djeroen

5716 silver badges21 bronze badges

Comments

Viktor Maksimov · Accepted Answer · 2015-10-23 16:28:27Z

1

1.Include jQuery library in your document.

2.Include this script:

$(document).ready(function(){
   $('#kullanici_adi_text').focus(function(){
       $(this).css('color', 'red');
   }).focusout(function(){
       $(this).css('color', 'black');
   });
});

answered Oct 23, 2015 at 16:28

Viktor Maksimov

1,4651 gold badge10 silver badges11 bronze badges

Collectives™ on Stack Overflow

Change textbox text color with javascript

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related