StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>A key's default action is performed during the <code>keydown</code> event, so, naturally, by the time <code>keyup</code> propagates, the Tab key has changed the focus to the next field.</p> <p>You can use:</p> <pre><code>jQuery(document).ready(function() { $('#firstfield, #secondfield').on({ "keydown": function(e) { if (e.which == 9) { alert("TAB key for " + $(this).attr("id") + " .keydown() called."); } }, "keyup": function(e) { if (e.which != 9) { alert("Handler for " + $(this).attr("id") + " .keyup() called."); } } }); }); </code></pre> <p>This way, if the Tab key is pressed, you can make any necessary adjustments before handling other keys. <a href="http://jsfiddle.net/KtSja/7/"><strong>See your updated fiddle for an exampe.</strong></a></p> <h2>Edit</h2> <p>Based on your comment, I revamped the function. The JavaScript ended up being a bit complicated, but I'll do my best to explain. <a href="http://jsfiddle.net/KtSja/9/"><strong>Follow along with the new demo here.</strong></a></p> <pre><code>jQuery(document).ready(function() { (function($) { $.fn.keyAction = function(theKey) { return this.each(function() { if ($(this).hasClass("captureKeys")) { alert("Handler for " + $(this).attr("id") + " .keyup() called with key "+ theKey + "."); // KeyCode dependent statements go here. } }); }; })(jQuery); $(".captureKeys").on("keydown", function(e) { $("*").removeClass("focus"); $(this).addClass("focus"); }); $("body").on("keyup", "*:focus", function(e) { if (e.which == 9) { $(".focus.captureKeys").keyAction(e.which); $("*").removeClass("focus"); } else { $(this).keyAction(e.which); } }); }); </code></pre> <p>Basically, you give <code>class="captureKeys"</code> to any elements on which you want to monitor keypresses. Look at that second function first: When <code>keydown</code> is fired on one of your <code>captureKeys</code> elements, it's given a dummy class called <code>focus</code>. This is just to keep track of the most recent element to have the focus (I've given <code>.focus</code> a background in the demo as a visual aid). So, no matter what key is pressed, the current element it's pressed over is given the <code>.focus</code> class, as long as it also has <code>.captureKeys</code>.</p> <p>Next, when <code>keyup</code> is fired <strong>anywhere</strong> (not just on <code>.captureKeys</code> elements), the function checks to see if it was a tab. If it was, then the focus has already moved on, and the custom <code>.keyAction()</code> function is called on whichever element was the last one to have focus (<code>.focus</code>). If it wasn't a tab, then <code>.keyAction()</code> is called on the current element (but, again, only if it has <code>.captureKeys</code>).</p> <p>This should achieve the effect you want. You can use the variable <code>theKey</code> in the <code>keyAction()</code> function to keep track of <a href="http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes">which key was pressed</a>, and act accordingly.</p> <p>One main caveat to this: <strong>if a <code>.captureKeys</code> element is the last element in the DOM</strong>, pressing Tab will remove the focus from the document in most browsers, and the <code>keyup</code> event will never fire. This is why I added the dummy link at the bottom of the demo.</p> <p>This provides a basic framework, so it's up to you to modify it to suit your needs. Hope it helps.</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