javascript - how to clear textbox when it first comes into focus? - Stack Overflow

admin管理员组

文章数量:1350906

I'm trying to clear a textbox when it first es into focus and that's all. I can clear the textbox whenever it es into focus but this is turning into a problem. I just want it to clear when it first es 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('')
});

I'm trying to clear a textbox when it first es into focus and that's all. I can clear the textbox whenever it es into focus but this is turning into a problem. I just want it to clear when it first es 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('')
});

• javascript
• jquery

Share Improve this question Follow asked Apr 3, 2011 at 3:04 MikeMike 98033 gold badges1515 silver badges3030 bronze badges 1

• I would test the value against the default value on focus - while also blanking out if value is default - so that you appear to give the user a default without actually providing content. Also, your 'input[type=text]' is capturing way too many matches to be useful. – Jared Farrish Commented Apr 3, 2011 at 3:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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/32Tns/4/

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.

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.

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 remend you using an id selector (input#id) or class selector (input.class) to clearly identify this special textinput. So you'll endup with:

$("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 this for real inlined labels.

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

本文标签： javascripthow to clear textbox when it first comes into focusStack Overflow