Jquery: change the input font colour

JavaScript
1

Hi,

How can I change the font colour in the input fields such as the example below?

The default text for all input fields are set to be black by default in CSS.

But I want to set the font colour of input fields for First Name and Last Name to be grey by default, they input text will be black like other fields when the text is type in.

I put this line in my jquery code below but it doesnt change anything obviously,

this.value.css({color:‘#999999’});


<input name="message_name_first" id="message_name_first" type="text" class="field field165px_width"/> &nbsp;
        <input name="message_name_last" id="message_name_last" type="text" class="field field165px_width"/>    

var defaultText_fn = 'First Name';
    $('#message_name_first').val(defaultText_fn).focus(function() {
        if ( this.value == defaultText_fn ) this.value = '';
    }).blur(function(){
        if ( !$.trim( this.value ) ) this.value = defaultText_fn;
		[COLOR="Red"]this.value.css({color:'#999999'});[/COLOR]
		});
	
	var defaultText_ln = 'Last Name';
    $('#message_name_last').val(defaultText_ln).focus(function() {
        if ( this.value == defaultText_ln ) this.value = '';
    }).blur(function(){
        if ( !$.trim( this.value ) ) this.value = defaultText_ln;
    	});

This is the test link for what I meant above,
http://lauthiamkok.net/tmp/projects/hillcrest_2010/contact-us

Many thanks,
Lau

2

I would suggest that you change the class, instead of adding the color with jQuery. Reason being, it’s best to keep design and functionality separate. If, down the road, you want to change the color, you don’t have to wade through tons of JS.

Check out addClass, removeClass, toggleClass and hasClass in the jQuery docs.

3

While I agree with what telos suggested, if you do need to keep it in js, you need to call css function on element itself, not on its value; and it should be a jquery object before you call css function on it.
So this I just took part of your blur event with changes below:


.blur(function(e){
  if ( !$.trim( this.value ) ) this.value = defaultText_fn;
  $(e.target).css({
    color:'#999999'
  });
});

I didn’t test it, so watch out for some typos.

4

got it thanks. it works. i think what telos suggested is great - will try this myself.

thanks alot :smiley: