jquery: How to set a few onmouse listeners

Question

Not sure what i am doing wrong but alert(titleTxt); shows always other_location. I need add two onmouse listeners but seems it is always attached to the last element.

function ghostText(name){
    obj = $("input[name='"+name+"']");
    titleTxt = obj.val();
    obj.css('color', '#cccccc');
    obj.mouseover(function() {
        if(obj.val() == titleTxt){
            obj.val(""); 
            obj.css('color', '#333333');
        }
        alert(titleTxt);
    });
    obj.mouseout(function() {
        if(obj.val() == ''){
            obj.val(titleTxt); 
            obj.css('color', '#cccccc');
        }
    });
}

ghostText('keyword');
ghostText('other_location');

Wouldn't simply adding `placeholder` attribute do what you need? — Ilia G, Dec 10 '11 at 17:48
`placeholder` attribute is an HTML5 feature so, its not backward compatible. — Ricardo Souza, Dec 10 '11 at 17:52
@rcdmk unless you are building an intranet app specifically targeted for IE6, that is hardly an issue. — Ilia G, Dec 10 '11 at 17:54
So you can look at: http://stackoverflow.com/questions/6561235/how-to-use-html5-placeholder-attribute-with-backward-compatibility-in-mind — Ricardo Souza, Dec 10 '11 at 18:03
I am not sure what you mean by that, but current versions of IE, FF and Chrome support placeholder. — Ilia G, Dec 10 '11 at 18:14

jfriend00 · Answer 1 · 2011-12-10T18:38:36.447

Your variables titleText and obj are implicit global variables. You need to put var in front of them so they are local variables and can have different values for each invocation of the ghostText() function.

Your alert is always showing the value of the last call to ghostText() because titleText is a global variable who's value gets changed every time ghostText() is called. It should look like this:

function ghostText(name){
    var obj = $("input[name='"+name+"']");
    var titleTxt = obj.val();
    obj.css('color', '#cccccc');
    obj.mouseover(function() {
        if(obj.val() == titleTxt){
            obj.val(""); 
            obj.css('color', '#333333');
        }
        alert(titleTxt);
    });
    obj.mouseout(function() {
        if(obj.val() == ''){
            obj.val(titleTxt); 
            obj.css('color', '#cccccc');
        }
    });
}

ghostText('keyword');
ghostText('other_location');

Though the above code seems fine, you could use .hover() and use method chaining to take advantage of jQuery a little more:

function ghostText(name){
    var obj = $("input[name='"+name+"']").css('color', '#cccccc');
    var titleTxt = obj.val();
    obj.hover(function() {
        if(obj.val() == titleTxt){
            obj.val("").css('color', '#333333'); 
    }, function() {
        if(obj.val() == ''){
            obj.val(titleTxt).css('color', '#cccccc');
        }
    });
}

ghostText('keyword');
ghostText('other_location');

andyb · Answer 2 · 2011-12-10T18:28:27.087

1

Since you are using jQuery, you could bind the mouseover and mouseout events with the following example:

Edit: Updated JavaScript for a better "ghosttext"

HTML

<input name="keyword" value="foo"/>
<input name="other_location" value="bar"/>

CSS

input {
    color:#cccccc;
}

JavaScript

$('input[name="keyword"], input[name="other_location"]').on('mouseover', function() {
    if (this.defaultValue == this.value) {
        $(this).css('color', '#333333');
    }
}).on('mouseout', function() {
    $(this).css('color', '#cccccc');

    if (this.value == '') {
        this.value = this.defaultValue;
    } else if (this.defaultValue != this.value) {
        $(this).css('color', '#333333');
    }
}).on('click', function() {
    if (this.defaultValue == this.value) {
        this.value = '';
    }
});

as demonstrated in this fiddle. Note this example requires jQuery 1.7 or above since I have used the newer event binding method .on() however it is perfectly possible using the older .mouseover() and .mouseout() methods.

edited Dec 10 '11 at 18:28

answered Dec 10 '11 at 18:00

andyb

43,435
12
121
150

This doesn't answer the real problem. his problem is to simulate the `placeholder` HTML5 attribute. – Ricardo Souza Dec 10 '11 at 18:05
@rcdmk Actually that was my guess. OP does not state that. Really, it is totally unclear what OP is trying to do, but this answer seem to follow given question fairly closely. – Ilia G Dec 10 '11 at 18:19
@rcdmk I agree that the `placeholder` is _probably_ what the OP was after. Updated answer with a better solution. I'm not going to claim it's bug free though :-) – andyb Dec 10 '11 at 18:29
If this answer is the solution could you please [accept](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) it so that other users will be able to see more clearly which answer solved your problem? – andyb Dec 11 '11 at 06:41

score 0 · Answer 3 · edited May 23 '17 at 10:08

The problem is that titleText is a global property and changes are "shared".

The code in the post is therefor essentially doing:

// ghostText('keyword')
window.titleTxt = obj.val()       // 'keyword'
// ghostText('other_location')
window.titleTxt = obj.val()       // 'other_location'
// later in a callback
alert(window.titleTxt)            // 'other_location'

(Note that there is only one property named window.titleTxt.)

Instead, use a local variable:

var titleTxt = obj.val()

The var keyword, in function-scope, annotates that titleTxt is a local variable: this variable will subsequently be closed over in the callbacks due to the lexical scope. See What is the purpose of the var keyword and when to use it (or omit it)?. (Note that each function invocation has it's own titleTxt variable in this scenario.)

Happy coding.

jquery: How to set a few onmouse listeners

3 Answers3

HTML

CSS

JavaScript