Question

我有三个文字输入字段，例如this on 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（在左侧边栏上）。

此外，您还有一个不必要的括号（}）。删除它，它应该工作。

Here是关于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');
     });

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

5 个答案: