Stop function execution is input element has focus?
<p>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:</p>

<pre><code>
$(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;
    }
</code></pre>

<p>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.</p>

<p>Any help would be very much appreciated.</p>
