title: jquery, on tabbing prevent focus in iframe but not in the input inside it
body: <p>The scenario: </p>
  
  <p>I have a page with form that loads more than 4 iframe. i have no control in this iframe as this is generated by other website(API);</p>
  
  <p>The Iframe has a form and input in it.</p>
  
  <p>in my code</p>
  
  <pre><code>&lt;form&gt;
  &lt;div class="fields"&gt;
      &lt;!--onload iframe will populate this area--&gt;
  &lt;/div&gt;  
  
  &lt;div class="fields"&gt;
      &lt;!--onload iframe will populate this area--&gt;
  &lt;/div&gt;  
  
  &lt;div class="fields"&gt;
      &lt;!--onload iframe will populate this area--&gt;
  &lt;/div&gt; &lt;/form&gt;
  </code></pre>
  
  <p>upon page load this happens</p>
  
  <pre><code>&lt;form&gt;
  &lt;div class="fields"&gt;
      &lt;iframe src="" frameborder="0"&gt;
          &lt;html&gt;
              &lt;body&gt;
                  &lt;form action=""&gt;
                      &lt;input type="text"&gt;
                  &lt;/form&gt;
              &lt;/body&gt;
          &lt;/html&gt;
      &lt;/iframe&gt;
  &lt;/div&gt;  
  
  &lt;div class="fields"&gt;
      &lt;iframe src="" frameborder="0"&gt;
          &lt;html&gt;
              &lt;body&gt;
                  &lt;form action=""&gt;
                      &lt;input type="text"&gt;
                  &lt;/form&gt;
              &lt;/body&gt;
          &lt;/html&gt;
      &lt;/iframe&gt;
  &lt;/div&gt;  
  
  &lt;div class="fields"&gt;
      &lt;iframe src="" frameborder="0"&gt;
          &lt;html&gt;
              &lt;body&gt;
                  &lt;form action=""&gt;
                      &lt;input type="text"&gt;
                  &lt;/form&gt;
              &lt;/body&gt;
          &lt;/html&gt;
      &lt;/iframe&gt;
  &lt;/div&gt;&lt;/form&gt;
  </code></pre>
  
  <p>in chrome: 
  when filling up the form, tabbing in chrome does not have any problem. 
  e.g click on the first input, then press tab key for next input until you complete the whole form filling up.</p>
  
  <p>but in firefox mozilla:</p>
  
  <p>click on the first input, then tab twice to get the next input. it does not select directly the input fields, it seems it goes to every element.</p>
  
  <p>is there a script to prevent this? like the normal behaviour in chrome?</p>
  
  <p>i have check this <a href="https://stackoverflow.com/questions/7441739/tabindex-to-skip-iframe-but-not-content-inside">Tabindex to skip iframe but not content inside</a>
  but my case is different </p>