how do i edit the font color of the initial value of form input?

Question

I have created an effect on my form with onblur and onfocus. How do I change the colors on these onblur and onfocus elements? However, I would like to keep the user's input default as black.

    $('input:text').focus(function(){
    var newValue = $(this).val();
        if($(this).val() == 'Email'){
            $(this).attr('value','');
            } else {
            $(this).val(newValue);
            }
});

$('input:text').blur(function(){
    var newValue = $(this).val();
        if($(this).val() == ''){
            $(this).attr('value','Email');
            } else {
            $(this).val(newValue);
            }
});

Thank you

score 4 · Accepted Answer · answered Apr 06 '11 at 06:08

4

Well, you don't really need javascript, css can handle focus pretty well. Just define it in your stylesheet:

input[type="text"] {color:black}
input[type="text"]:focus {color:purple}

But if you have to do it with jQuery, just use the css() function:

$(this).css({'color' : 'purple'});

answered Apr 06 '11 at 06:08

Wesley Murch

101,186
37
194
228

i have a quick question: is there a way to make the text black if the user has inputted something and is on blur? I've been trying to do a code for it but I don't think I'm getting it right. – hellomello Apr 06 '11 at 06:30
The default style should take priority on blur. If the user has not input any text yet, I don't think you will see a color at all :) – Wesley Murch Apr 06 '11 at 06:33
Yeah it does. but I'm making my initial value to be gray. and then when you focus or input something it's black (this is in my case). I would like the text to hold black if thats possible? Maybe I should just leave it gray so users would know that they're onblur? – hellomello Apr 06 '11 at 06:42
So you expect to have the fields already populated, but only want the grey color on unmodified text, and black for fields the user has modified? – Wesley Murch Apr 06 '11 at 06:46
Yeah. the fields that are already populated are like "email" for email fields, "username" for username fields, etc... and then when the user inputs (for example: email address) the text will be colored and onfocus and onblur. But if these fields are not filled out, it would be default. – hellomello Apr 06 '11 at 06:54
What you are after is placeholder text, I should have deduced that by looking at your javascript. Luckily for you, html5 has given us the "placeholder" attribute which is exactly what you want, no script required! If you need to support older browsers, your best bet is to take alex's advice and add/remove a class in your javascript via `addClass()` – Wesley Murch Apr 06 '11 at 06:59
I tried putting placeholder into my input form, but it doesn't seem to work? Do you think you can help me with some addClass removeClass examples that might do this? Thank you for your time and help! – hellomello Apr 06 '11 at 17:27
@andrewliu: Put up a [jsfiddle](http://jsfiddle.net/) and I will help you with this. – Wesley Murch Apr 06 '11 at 17:32
@andrewliu: As I started working on the fiddle, I realized there is a much better way to handle this that would not use any of your existing code, I don't have the time until this evening but I will share it with you when it is complete. The trick is that we can hook into the elements placeholder attribute with jquery and assign it to the input, rather than hardcoding the value. I really want this for my own projects so I want to spend more than 5 minutes on it. Hope this makes sense, will be in touch. – Wesley Murch Apr 06 '11 at 18:23
Oo I can't wait for the finished product! Thank you so much! – hellomello Apr 06 '11 at 20:19
@andrewliu: [Started writing the code](http://jsfiddle.net/JXu5s/), but it's not complete yet (still submits placeholder text values if unaltered). I saw some plugins for this on the jQuery site, but none of them worked properly or had that missing feature. It's a work in progress, let me know if you find a good one. BTW it's NOT a plugin, it's just a piece of code for browsers that don't do placeholder. – Wesley Murch Apr 07 '11 at 00:24
i found this site that might help both of us :) http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html – hellomello Apr 07 '11 at 02:05
@andrewliu: Took a look, but this one suffers from the same issues plus a few extra ones. I think I may open a new Q about this, will notify you if I do so you can track it. – Wesley Murch Apr 07 '11 at 02:32
cool thanks! I was just going to use some php checks so if the user does submit the placeholder text, it will have some error. – hellomello Apr 07 '11 at 03:18
@andrewliu: [Here's the post](http://stackoverflow.com/questions/5575621/what-is-the-most-accurate-way-to-emulate-the-placeholder-attribute-in-browsers) – Wesley Murch Apr 07 '11 at 03:31

score 1 · Answer 2 · answered Apr 06 '11 at 06:06

1

This plugin I made will handle that for you: inputLabel.

Otherwise, safest is to add a class and remove the class, and put the different colour in the CSS.

answered Apr 06 '11 at 06:06

alex

479,566
201
878
984

Thank you for the input. I think adding class would be an easier way for me. – hellomello Apr 06 '11 at 06:26

how do i edit the font color of the initial value of form input?

2 Answers2