单击鼠标时清除文本字段值

Question

我有三个文本输入字段，像在jsfiddle上这样 。

我也将代码放在这里：

<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');

        }
    });

我希望在每个字段上单击鼠标都会清除默认值 ，并且当用户输入值时， 文本颜色为黑色而不是灰色。

我尝试在jsfiddle链接上显示。 但这不起作用，为什么？

Answer 1

在HTML5中，可以为此使用placeholder ：

<input type="text" placeholder="age" size=30>

这是示例： http : //jsfiddle.net/24n7t/13/

但这仅适用于现代浏览器。

Answer 2

它在jsfiddle上不起作用，因为您没有选择加载jQuery（在左侧栏上）。

另外，您也有不必要的括号（ } 。 删除它，它应该工作。

这是jsfiddle上的一个工作示例。

Answer 3

您的jQuery代码有错误，还有1个大括号

我使用下面的代码删除它

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

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

        });

第二件事，你包括jQuery库？ 如果是，则确定，并且还包括document.ready语法

Answer 4

语法错误：您还有一个额外的}

Answer 5

一些可能的改进...

$('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');
     });