javascript 如何在文本框第一次进入焦点时清除它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5527292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to clear textbox when it first comes into focus?
提问by Mike
I'm trying to clear a textbox when it first comes into focus and that's all. I can clear the textbox whenever it comes into focus but this is turning into a problem. I just want it to clear when it first comes into focus.
我试图在文本框第一次成为焦点时清除它，仅此而已。每当它成为焦点时，我都可以清除文本框，但这正在变成一个问题。我只是想让它在第一次成为焦点时变得清晰。
So when the page loads, the textbox says "search here" -- once the user clicks inside, "search here" disappears and the textbox goes blank. The user can keep typing their search query.
所以当页面加载时，文本框会显示“在此处搜索”——一旦用户点击里面，“在此处搜索”就会消失，文本框变为空白。用户可以继续输入他们的搜索查询。
But my code, as seen below, just keeps clearing the textbox. Any ideas?
但是我的代码，如下所示，只是不断清除文本框。有任何想法吗？
$('input[type=text]').focus(function() {
$(this).val('')
});
回答by Hussein
This clears the default text on focus and puts it back in on blur. If a new text is typed in different then default value, it no longer clears the input. Test it out by clicking outside and input few times. Then type in new text and do the same.
这会清除焦点上的默认文本并将其重新置于模糊状态。如果输入的新文本与默认值不同，则不再清除输入。通过单击外部并输入几次来测试它。然后输入新文本并执行相同操作。
$('.text').focus(function() {
if (this.value == this.title) {
$(this).val("");
}
}).blur(function() {
if (this.value == "") {
$(this).val(this.title);
}
});
Check working example at http://jsfiddle.net/32Tns/4/
在http://jsfiddle.net/32Tns/4/检查工作示例
回答by buschtoens
If you only want to do this once, then you won't need the event handler anymore after executation. So removing the event handler would be the best practice and perfomant way.
如果您只想这样做一次，那么在执行后您将不再需要事件处理程序。因此，删除事件处理程序将是最佳实践和执行方式。
$("input[type=text]").focus(function(event) {
$(this).val("").unbind(event);
});
This is better, because you won't create an overhead by defining additional variables or DOMNodes and the event is deleted as you won't use it anymore.
这更好，因为您不会通过定义额外的变量或 DOMNodes 来创建开销，并且事件会被删除，因为您将不再使用它。
Aside from that we suggest you using a different selector, because you will apply this event for evey textinput on your site. And it's very likely, that you don't want this. I recommend you using an id selector (input#id) or class selector (input.class) to clearly identify this special textinput.
So you'll endup with:
除此之外，我们建议您使用不同的选择器，因为您会将此事件应用于您网站上的每个文本输入。而且很可能你不想要这个。我建议您使用 id 选择器 ( input#id) 或类选择器 ( input.class) 来清楚地识别这个特殊的文本输入。所以你最终会得到：
$("input.clearOnFocus").focus(function(event) {
$(this).val("").unbind(event);
});
I suppose, that you want to do something similar to the search bar on the top of this page. What you're doing is semantically not correct. Look at thisfor real inlined labels.
我想，您想做一些类似于此页面顶部的搜索栏的操作。你在做什么在语义上是不正确的。看看这个真正的内联标签。
回答by sandok
Most of the answers that have been published solve the problem. Now I'm posting another one that make use of the useful jQuery function "one".
大多数已发布的答案都解决了问题。现在我要发布另一个使用有用的 jQuery 函数“one”的。
Description: Attach a handler to an event for the elements. The handler is executed at most once per element.
描述：将处理程序附加到元素的事件。每个元素最多执行一次处理程序。
//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("");
});
回答by ysrb
var isFirst = true;
$('input[type=text]').focus(function() {
if(isFirst){
$(this).val('');
isFirst = false;
}
});
Try this. The code only delete only the first occurrence of focus.
试试这个。该代码仅删除第一次出现的焦点。
