非常简单的JavaScript来删除文本框中的值

Question

iv有一个非常简单的javascript问题。 这里我会使用查询来查询部分内容，但是有一些通过javascript进行查询的方式。 基本上，我正在写一个小脚本，因此单击一个文本框中的值时，它将带走该值，以便您可以键入（例如，对于大多数用户名框，它们都有一个小注释）。 可能有更好的方法（我已经想到了），因此也可以建议它们。 无论如何，我都能轻松地运行该部件，问题在于，每当用户再次单击时，所有数据都将被删除，因此，如果他们只是想调整某些内容，则无法调整。 为了解决这个问题（以秒为单位显示代码），我放入了一个检查变量和一个if。 这就是它的样子。 （不起作用，顺便说一句）

var unumber = 0;
var pnumber = 0; 

 if(unumber<1){
  $('#username').click(function(){
  unumber = 1;
  $('#username').val('');
 });
 };

 if(pnumber<1){
   $('#password').click(function(){
   $('#password').val('');
   pnumber = 1;
   });
 };

我假设发生的事情是每次单击一次都会重置变量，这会导致一个更普遍的问题，如果是这种情况，为什么整个脚本而不是事件处理程序都将运行？ 我是Java语言的新手，如果这是一个愚蠢的问题，请原谅我。 无论如何，这是一个非常简单的脚本，并且有更好，更有效的方法来执行此操作，但是如何以这种方式完成操作呢？

Answer 1

小于1的支票应在点击处理程序中

var unumber = 0;
var pnumber = 0; 

$('#username').click(function(){
  if(unumber<1){
    unumber = 1;
    $('#username').val('');
  }
});

$('#password').click(function(){
  if(pnumber<1){
     pnumber = 1;
     $('#password').val('');
  }
});

请注意，这不是很可靠，它不能处理制表符。 要解决此问题，请处理focus事件。

另一个问题是，如果您未输入任何内容并离开该字段，则不会收到该消息。 更好的方法是在字段获得焦点时与初始值进行比较。 如果离开该字段时那里什么也没有，请恢复为原始值。

这是一个用于创建这些占位符的jQuery插件： https : //github.com/mathiasbynens/Placeholder-jQuery-Plugin

此外，较新的浏览器也支持placeholder属性，该placeholder属性的作用完全符合http://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/

Answer 2

我想说的最好的方法是在文本输入中添加一个清晰的按钮。 参见示例： 如何像iPhone一样在HTML文本输入框中放置一个清除按钮？

Answer 3

无需进行混乱的数字检查，使用有关元素上的数据

这应该为您工作。

$('#username,#password').focus(function(){
  if(!$(this).data('seen')) {
    $(this).data('seen',true);
    $(this).val('');
  }
});

http://jsfiddle.net/DeZ7D/

您可以存储占位符，如果用户未输入任何内容，则可以重新替换为模糊。 更详细的实现在这里：

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html