Question

I have three text input fields, like this on jsfiddle.

I put my code here also:

<table>
    <tr>
        <td><input type="text"  value="age" size=30>
        </td>
    </tr>
    <tr>
        <td> <input type="text"  value="Name" size=30>
        </td>
    </tr>
    <tr>
        <td><input type="text"  value="your email" size=30>
        </td>
    </tr>
</table>

css:

input{color:#CCC;}

js:

$('input').click(function() {

            $(this).attr('value', '');
            $(this).css('color','#000');

        }
    });

I would like the mouse click on each field will clear the default value, and when user input value, the text color is black instead of gray.

What I tried is showing on the jsfiddle link. But it does not work, why?

Answer 1

It doesn’t work on jsfiddle because you didn’t choose to load jQuery (on the left sidebar).

Also, you have an unnecessary bracket (}). Remove that and it should work.

Here‘s a working example on jsfiddle.