javascript - jQuery events not firing - Stack Overflow

admin管理员组

文章数量:1325229

I have been trying to get this to work. Basically I have a search box that has a default string in it (i.e. Search) and it should go away when the user clicks on the input field.

Here is the code:

HTML:

<form method="get" action="index.php" id="search">
<span id="searchLogo"></span>
<input type='text' name='q' id='searchBox' value="Search <?php print $row[0]?> tweets!" autoplete="off" />
</form>

Javascript/jQuery: (defaultString is a global variable that has the value of the textbox)

function clearDefault() {
var element = $('#searchBox');

if(element.attr('value') == defaultString) {
    element.attr('value',"");
}
element.css('color','black');
}

$('#searchBox').focus(function() {
clearDefault();
});

I have been trying to get this to work. Basically I have a search box that has a default string in it (i.e. Search) and it should go away when the user clicks on the input field.

Here is the code:

HTML:

<form method="get" action="index.php" id="search">
<span id="searchLogo"></span>
<input type='text' name='q' id='searchBox' value="Search <?php print $row[0]?> tweets!" autoplete="off" />
</form>

Javascript/jQuery: (defaultString is a global variable that has the value of the textbox)

function clearDefault() {
var element = $('#searchBox');

if(element.attr('value') == defaultString) {
    element.attr('value',"");
}
element.css('color','black');
}

$('#searchBox').focus(function() {
clearDefault();
});

• javascript
• jquery
• html

Share Improve this question Follow asked Feb 26, 2011 at 21:15 AlexBrandAlexBrand 12.4k2121 gold badges8989 silver badges134134 bronze badges 3

• Have you tried element.val() == defaultString and element.val('') (which is the only right way to access the value of a form element ;))? – Felix Kling Commented Feb 26, 2011 at 21:17
• I don't see any links between the two code snippets. You don't seem to call the clearDefault() function at all, there is no event binding to your input field that would take care of that. – András Szepesházi Commented Feb 26, 2011 at 21:19
• 1 @András Szepesházi Wouldn't the last 3 lines of code bind the focus event to the clearDefault() function? – AlexBrand Commented Feb 26, 2011 at 21:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Problem is here:

if(element.attr('value') == defaultString) {
    element.attr('value',"");
}

Change it with:

if(element.val() == defaultString) {
    element.val('value');
}

Update: Check it here: http://jsfiddle/mr3T3/2/

The problem was that the event binding was not inside the $(document).ready() handler.

Fixed:

function clearDefault() {
var element = $('#searchBox');

if(element.val() == defaultString) {
element.val("");
}
element.css('color','black');
}

$(document).ready(function() {
    $('#searchBox').focus(function() {
    clearDefault();
    });
});

It could be that event in fact is firing and your problem is in

if(element.attr('value') == defaultString) {
    element.attr('value',"");
}

is "defaultString" properly defined?

put a simple alert() inside clearDefaults() and see if the event works.

i don't think clearDefault is reusable function, so don't create unnecessary function for small block of code. See the following code sample, i added a small improvement in your functionality.

<form method="get" action="index.php" id="search">
<span id="searchLogo"></span>
<input type='text' name='q' id='searchBox' default="Search tweets!"  value="Search tweets!" autoplete="off" />
</form>

$(document).ready(function() {
    $("#searchBox").focus(function(e){
        var $this = $(this);
        if($this.val() == $this.attr('default')) $this.val('');
        else if($this.val().length == 0 ) $this.val($this.attr('default'));
    });
    $("#searchBox").blur(function(e){
        var $this = $(this);
        if($this.val().length == 0 ) $this.val($this.attr('default'));
    });
});

I added a default attribute to store default value and used it later on blur event.

See the example in jsFiddler

本文标签： javascriptjQuery events not firingStack Overflow