Find solution
how to clear up text field on click?

clear text field value when mouse click

  • I have three text input fields, like http://jsfiddle.net/24n7t/1/. 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:

    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. http://jsfiddle.net/purmou/24n7t/2/'s a working example on jsfiddle.

Leem.fin at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

In HTML5, you could use placeholder for this: <input type="text" placeholder="age" size=30> Here is the example: http://jsfiddle.net/24n7t/13/ But it only works in modern browsers.

sandeep

You have error in jquery code, 1 more curly brace I remove it use below code $('input').click(function() { $(this).attr('value', ''); $(this).css('color','#000'); }); and second thing you included jquery library?? if yes than ok and also include document.ready syntax

Sonal Khunt

Syntax error: you have an extra }

Raghav Bhushan

Some possible improvements... $('input[type=text], input[type=password]') //leave submit buttons, etc alone .bind( 'focus', function() { //focus is more accessible than click //a user can't change a field without it $(this) .attr('value', '') //more chaining = less searching .css('color','#000'); }) .bind( 'blur', function() { //supposing you want to revert back on blur... $(this) .css('color','#ccc'); });

fritzfromlondon

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.