Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There is no simple programmatic way to do this using Javascript... so here's a brute force way.</p> <p><a href="http://www.w3.org/TR/html4/interact/forms.html#tabbing-navigation" rel="noreferrer"><strong>According to W3</strong></a>:</p> <blockquote> <p>Elements that may receive focus should be navigated by user agents according to the following rules:</p> <ol> <li>Those elements that support the tabindex attribute and assign a positive value to it are navigated first. Navigation proceeds from the element with the lowest tabindex value to the element with the highest value. Values need not be sequential nor must they begin with any particular value. Elements that have identical tabindex values should be navigated in the order they appear in the character stream. </li> <li>Those elements that do not support the tabindex attribute or support it and assign it a value of "0" are navigated next. These elements are navigated in the order they appear in the character stream. </li> <li>Elements that are disabled do not participate in the tabbing order.</li> </ol> </blockquote> <p>I accomplished this by storing the order of elements in the form that have <code>tabIndex &gt; 0</code> in their tabIndex order and then concatenating the rest of the elements in the order they appear within the document. The following code simulates a tab keypress when focused on a form input and the letter 'z' is pressed (but you can change this to whatever condition you require):</p> <pre><code>$(':input').keypress(function(e){ // if 'z' pressed if (e.which == 122) { // if we haven't stored the tabbing order if (!this.form.tabOrder) { var els = this.form.elements, ti = [], rest = []; // store all focusable form elements with tabIndex &gt; 0 for (var i = 0, il = els.length; i &lt; il; i++) { if (els[i].tabIndex &gt; 0 &amp;&amp; !els[i].disabled &amp;&amp; !els[i].hidden &amp;&amp; !els[i].readOnly &amp;&amp; els[i].type !== 'hidden') { ti.push(els[i]); } } // sort them by tabIndex order ti.sort(function(a,b){ return a.tabIndex - b.tabIndex; }); // store the rest of the elements in order for (i = 0, il = els.length; i &lt; il; i++) { if (els[i].tabIndex == 0 &amp;&amp; !els[i].disabled &amp;&amp; !els[i].hidden &amp;&amp; !els[i].readOnly &amp;&amp; els[i].type !== 'hidden') { rest.push(els[i]); } } // store the full tabbing order this.form.tabOrder = ti.concat(rest); } // find the next element in the tabbing order and focus it // if the last element of the form then blur // (this can be changed to focus the next &lt;form&gt; if any) for (var j = 0, jl = this.form.tabOrder.length; j &lt; jl; j++) { if (this === this.form.tabOrder[j]) { if (j+1 &lt; jl) { $(this.form.tabOrder[j+1]).focus(); } else { $(this).blur(); } } } } }); </code></pre> <h2><a href="http://jsfiddle.net/SbtDM/" rel="noreferrer">See demo</a></h2>
    singulars
    1. This table or related slice is empty.
    1. POSimulating the TAB keydown: focusing next element as determined by `tabIndex`
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USmVChr
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POSimulating the TAB keydown: focusing next element as determined by `tabIndex`
      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. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks for this! I've noticed two discrepancies on Chrome. 1) Using `z` will change the content of the `THIRD` focusable element to `z`. 2) When no element is focused, `TAB` will focus `FIRST` whereas `z` does nothing.
      singulars
      1. PO
      1. USRandomblue
    2. CO@Randomblue 1) Pressing 'z' was just an example trigger, I assumed this would be handled programmatically somehow. If needed you can add a `e.preventDefault()`. 2) You can change this by adding the trigger to `$('document')` as well, but from your requirements it sounded like you only wanted this functionality on form inputs.
      singulars
      1. PO
      1. USmVChr
    3. CO@Randomblue If you add `return false;` to the last part of the keypress function, it will not enter 'z' into the next textbox as returning false stops the browser from doing anything with the keypress that you first did (But only return false on your captured event otherwise all inputs will be captured)
      singulars
      1. PO
      1. USJakeJ
 

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