StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POStop function execution is input element has focus?
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload