Question

I haven’t been able to find a good answer to this issue. I’m trying to get a better handle on some nicer looking/acting form elements with JQuery. Here’s the code I’m using so far:

$(document).ready(function() {
        $('.input').addClass('inputOut clear'); // Grey out text initially, default bg

        $('.input').each(function() { // Fill in form fields with labels
            var text = getAttr($(this));
            $(this).attr("value", text);
            $(this).hasfocus = false;
        });

        $('.input').mouseover(function() {
            if ($(this).hasfocus == true) return;
            else {
                var text = getAttr($(this));
                $(this).removeClass();
                if($(this).attr("value") == text) $(this).addClass('inputOver clear');
                else $(this).addClass('inputOver filled');
            }
        });

        $('.input').mouseout(function() {
            if ($(this).hasfocus == true) return;
            else {
                var text = getAttr($(this));
                $(this).removeClass();
                if(($(this).attr("value") == "") || ($(this).attr("value") == text)) $(this).addClass('inputOut clear');
                else $(this).addClass('inputOut filled');
            }
        });

        $('.input').focus(function() {
            $(this).hasfocus = true;
            $(this).removeClass();
            $(this).addClass('inputActive');
            var text = getAttr($(this));
            if($(this).attr("value") == text) {
                $(this).attr("value", "");
            }
        });

        $('.input').blur(function() {
            $(this).hasfocus = false;
            var text = getAttr($(this));
            $(this).removeClass();
            if($(this).attr("value") == "") {
                $(this).attr("value", text);
                $(this).addClass('inputOut clear');
            }
            else if(($(this).attr("value") != "") && ($(this).attr("value") != text)) {
                $(this).addClass('inputOut filled');
            }
        });

        // TEST SPANS
        $("#spans span.off").fadeIn(0);

    });

    function getAttr(element) {
        var text = element.attr("id");
        text = text.replace(/-/g," ");
        return text;
    }

Everything is working exactly as I’d like except for one thing. The mouseover/mouseout functions run on elements that have focus. Being mostly HTML/PHP, my Javascript skills are definitely a work in progress, so be nice. What I thought would work is to add a isFocused property (you can see what I tried in there), but it hasn’t worked as I’ve tried it so far.

Any help would be very much appreciated.

Answer 1

You might want to refactor a bit.

Create named functions, or [better]create an object (global is ok if You don’t have a lot of js out there) and put Your functions in that object so that they have names.

MyAwesomeGlobalSomething={};
MyAwesomeGlobalSomething.mOverFunc=function(){
  //the stuff You do
       if ($(this).hasfocus == true) return;
            else {
                var text = getAttr($(this));
                $(this).removeClass();
                if($(this).attr("value") == text) $(this).addClass('inputOver clear');
                else $(this).addClass('inputOver filled');
            }
}
//and more functions here

You can now bind

 $('.input').mouseover(MyAwesomeGlobalSomething.mOverFunc);

now

$('.input').focus(function(){
  $(this).unbind('mouseover');
//and more functions here
});

fixes Your problem and

$('.input').blur(function(){
  $(this).mouseover(MyAwesomeGlobalSomething.mOverFunc);
//and more functions here
});

returns the function binding