Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Okay, I've decided to write my own solution that works in all major browsers (except Safari, but more on that later). Basically, how it'd work is that you assign a class to the last "tab-able" element in your form, which is usually the submit button, called 'lastInForm'. Simple HTML would look like this:</p> <pre><code>&lt;form action="action.php"&gt; &lt;fieldset&gt;&lt;input id="input1" name="input1" type="text" placeholder="text here" /&gt;&lt;/fieldset&gt; &lt;fieldset&gt;&lt;input id="input2" name="input2" type="text" placeholder="text here" /&gt;&lt;/fieldset&gt; &lt;fieldset&gt;&lt;input id="input3" name="input3" type="text" placeholder="text here" /&gt;&lt;/fieldset&gt; &lt;button class="lastInForm" type="submit"&gt;I'm last&lt;/button&gt; &lt;/form&gt; </code></pre> <p>Using the latest version of jQuery, I listen to the keydown event for that .lastInForm element and check for the keyCode 9, which corresponds to the tab-key. When I receive that event, I look up the closest form element, look up the first input element in said form, and apply focus to it. </p> <p>Like so:</p> <pre><code>$(document).ready(function(evt){ $('.lastInForm').live('keydown', function(evt){ if(evt.keyCode === 9){ evt.preventDefault(); var form = $(this).closest('form'); var input = $('input:first', form); if(input !== undefined){ input.focus(); } } }); }); </code></pre> <p>... which results neatly in a form where you can loop through the elements using the tab key. </p> <p>Now I mentioned earlier that it works on all major browser except Safari. The reason for this is that Safari by default doesn't allow you to tab to any element except textfields. To enable this behavior you have to go and check:</p> <pre><code>Preferences &gt; Advanced &gt; Universal Access: Press Tab to highlight each item on a webpage. </code></pre> <p>Why Apple has chosen to disable such a helpful accessibility feature by default is beyond me, but all I know is if a user enables this setting my script will work for them too.</p>
    singulars
    1. This table or related slice is empty.
    1. POMultiple forms on one HTML page: how to restrict tabbing to a single form?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USgillesv
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. CONow, I realize forcing this non-default behavior isn't exactly recommended for 99% of sites out there, but for this one edge case I'm working on it works like a charm. Hopefully someone will benefit from it.
      singulars
      1. PO
      1. USgillesv
    2. COPossible downside to this: in most browsers (IE, Chrome, Firefox, Safari - Opera handles tabs differently...), when you tab to the end of a page, hitting tab again brings you to the browser UI - usually the address bar, then back into the page from there. This will interfere with that. (User can still hit some browser hot-key to go directly to the address bar, so they're not completely trapped, however.) Other things you may need to take into account: shift-tab moves in the opposite direction, so you need to handle the first field in a similar but complementary way. (more in next comment)
      singulars
      1. PO
      1. USBrendanMcK
    3. COAlso, if user does go direct to address bar (Ctrl-L in some Chrome/Firefox, F4 in IE) and tabs into doc from there (using either tab or shift-tab), there's no guarantee that the browser will return to the last-focused element; some browsers start back at the top. Are the other forms visible to the user when not in use? If they're not visible, then using display:none or visibility:false on those forms will hide them and take them out of the tab order completely, making all of these edge-cases moot.
      singulars
      1. PO
      1. USBrendanMcK
 

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