Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>As <a href="https://stackoverflow.com/questions/5061353/how-to-create-a-keyboard-shortcut-for-an-input-button/5061382#5061382">zzzzBov</a> explained, the HTML <code>accesskey</code> defines a key that will be trapped only when it is combined with the <kbd>ALT</kbd> key. That is why that is <strong>not useful for trapping any key alone</strong>.</p> <p>But you have to take special care choosing the event to trap the cursor keys because <a href="http://bugs.jquery.com/ticket/7300" rel="nofollow noreferrer">Webkit has decided not to trap them with the <code>keypress</code> event as it is not in the standard</a>. At this moment the other 3 answers here use this <code>keypress</code> event and that is why they <strong>don't work in Google Chrome nor Safari</strong>, but if you change that to <code>keydown</code> they'll work on all browsers.</p> <p>You can use this jQuery code to capture the <code>keydown</code> event of the <kbd>left</kbd>, <kbd>right</kbd>, <kbd>up</kbd>, and <kbd>down</kbd> arrow keys: </p> <pre><code>$(window).keydown(function(e) { switch (e.keyCode) { case 37: // left arrow key case 38: // up arrow key e.preventDefault(); // avoid browser scrolling due to pressed key // TODO: go to previous image return; case 39: // right arrow key case 40: // up arrow key e.preventDefault(); // TODO: go to next image return; } }); </code></pre> <p>And in <strong>the following</strong> <em>code snippet</em> you can see and run a complete example in which images are swapped using the keys or the buttons.</p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var currentImage = 0; var imagesArray = [ 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/150px-Tux.svg.png', 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/150px-Wikipedia-logo-v2.svg.png', 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/150px-Git-logo.svg.png' ]; function hasPrev() { return currentImage &gt; 0; } function hasNext() { return currentImage &lt; imagesArray.length - 1; } function goToPrev(e) { e.preventDefault(); if (!hasPrev()) return; currentImage -= 1; updateScreen(); } function goToNext(e) { e.preventDefault(); if (!hasNext()) return; currentImage += 1; updateScreen(); } function updateScreen() { $('#imgMain').attr('src', imagesArray[currentImage]); $('#btnPrev').prop('disabled', !hasPrev()); $('#btnNext').prop('disabled', !hasNext()); } $(document).ready(function() { updateScreen(); $('#btnPrev').click(goToPrev); $('#btnNext').click(goToNext); }); var keyCodes = { left: 37, up: 38, right: 39, down: 40 }; $(window).keydown(function(e) { switch (e.keyCode) { case keyCodes.left: case keyCodes.up: goToPrev(e); return; case keyCodes.right: case keyCodes.down: goToNext(e); return; } });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>button:enabled kbd { color: green; font-weight: bold; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;button id="btnPrev"&gt; Previous Image &lt;br/&gt; &lt;small&gt;(arrow keys: &lt;kbd&gt;left&lt;/kbd&gt; or &lt;kbd&gt;up&lt;/kbd&gt;)&lt;/small&gt; &lt;/button&gt; &lt;button id="btnNext"&gt; Next Image &lt;br/&gt; &lt;small&gt;(arrow keys: &lt;kbd&gt;right&lt;/kbd&gt; or &lt;kbd&gt;down&lt;/kbd&gt;)&lt;/small&gt; &lt;/button&gt; &lt;br/&gt; &lt;img id="imgMain" src=""&gt;</code></pre> </div> </div> </p> <h2>UPDATE (May 2016)</h2> <p><strong>keyCode</strong> has recently been deprecated (but I haven't found a cross-browser solution yet). Quoting <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode" rel="nofollow noreferrer">MDN article for keyCode</a>:</p> <blockquote> <blockquote> <h3>Deprecated</h3> <p>This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.</p> </blockquote> <p>...</p> <p>This shouldn't be used by new web applications. IE and Firefox already (partially) support KeyboardEvent.key. Also, Google Chrome and Safari support KeyboardEvent.keyIdentifier which is defined in the old draft of DOM Level 3 Events. If you can use them or one of them, you should use them/it as far as possible.</p> </blockquote>
    singulars
    1. This table or related slice is empty.
    1. POHow to create a keyboard shortcut for an input button
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USMariano Desanze
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to create a keyboard shortcut for an input button
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COoh right, I forgot, keypress is really meant to determine which alphanumeric key was pressed (like for typing, as it preserves capitalization keycode), vs keydown is generic input (lowercase keycode is used, but will detect function keys etc).
      singulars
      1. PO
      1. USzzzzBov
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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