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

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

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

请注意，这不是很强大，它不会处理字段中的Tab键。要解决此问题，请处理focus事件。

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

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

此外，较新的浏览器支持与http://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/

完全相同的placeholder属性

Answer 2

我想说这样做的最好方法是在文本输入中有一个清晰的按钮。请参阅此处以获取示例：How do I put a clear button inside my HTML text input box like the iPhone does?

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

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

3 个答案: