Question

我正在尝试清除文本框，当它第一次成为焦点时，就是这样。每当它出现焦点时我都可以清除文本框，但这会变成一个问题。我只是希望它能在第一次成为焦点时清除。

因此，当页面加载时，文本框会显示“在此搜索” - 一旦用户点击内部，“在此搜索”消失，文本框变为空白。用户可以继续键入他们的搜索查询。

但是我的代码，如下所示，只是不断清理文本框。有什么想法吗？

    $('input[type=text]').focus(function() {
      $(this).val('')
});

Answer 1

这会清除焦点上的默认文本并将其重新置于模糊状态。如果以不同的默认值键入新文本，则不再清除输入。通过单击外部并输入几次来测试它。然后输入新文本并执行相同操作。

$('.text').focus(function() {
    if (this.value == this.title) {
        $(this).val("");
    }
}).blur(function() {
    if (this.value == "") {
        $(this).val(this.title);
    }
});

检查http://jsfiddle.net/32Tns/4/

处的工作示例

Answer 2

var isFirst = true;
 $('input[type=text]').focus(function() {
      if(isFirst){
        $(this).val('');
        isFirst = false;
       }
});

试试这个。该代码仅删除第一次出现的焦点。

Answer 3

如果您只想这样做一次，那么在执行之后您将不再需要事件处理程序。因此，删除事件处理程序将是最佳实践和性能方式。

$("input[type=text]").focus(function(event) {
    $(this).val("").unbind(event);
});

这样更好，因为您不会通过定义其他变量或DOMNode来创建开销，并且事件将被删除，因为您将不再使用它。

除此之外，我们建议您使用其他选择器，因为您将此事件应用于您网站上的evey textinput。很可能，你不想要这个。我建议您使用ID选择器（input#id）或类选择器（input.class）来清楚地标识此特殊textinput。所以你最终会得到：

$("input.clearOnFocus").focus(function(event) {
    $(this).val("").unbind(event);
});

我想，您想要执行类似于本页顶部搜索栏的操作。你在做什么在语义上是不正确的。查看this了解真实的内联标签。

Answer 4

已发布的大部分答案都解决了这个问题。现在我发布了另一个使用有用的jQuery函数“one”的文章。

Jquery.one()

描述：将处理程序附加到元素的事件。该每个元素最多执行一次处理程序。

//Limpiar campos input la primera vez que se entre
//Cleaning input fields first time they get focus
$('input[type=text]').one("focus", function() {    
        $(this).val("");
});

如何在第一次聚焦时清除文本框？

4 个答案:

检查http://jsfiddle.net/32Tns/4/