上输入在iFrame中

Question

自动进入TAB键与字段下一页输入我有输入的形式，其还具有嵌入在其中也有输入（伪HTML）形式的iFrame：

<input type="text" name="one" value="one" /> 
<input type="text" name="two" value="two" /> 
<input type="text" name="three" value="three" /> 
<iframe 
    <input type="text" name="bacon" value="bacon"> 
</iframe> 
<input type="text" name="four" value="four" /> 
<input type="text" name="five" value="five" /> 

当用户他们从输入采取标签他们从输入甚至输入内部iframe字段选择培根后三。我们都喜欢培根。

我也有一些JavaScript试图下一个输入重点回车键：

$(document).ready(function() { 
    $(document).on('keydown', 'input', function(ev) { 
    // Move to next on enter 
    if (ev.which === 13) { 
     var inputs = $(':tabbable'); 
     var next = inputs.index(this) + 1; 
     var input = inputs.eq(next == inputs.length ? 0 : next); 
     input.focus(); 
     return false; 
    } 
    }); 
}); 

的问题是JavaScript回车键代码永远不会聚焦腊肉领域，它会直接跳到了它。的jsfiddle：

https://jsfiddle.net/54n8mqkh/4/

让我们包括不使用的iFrame都顾不上回答。我知道这不是一个理想的实现。然而，我会接受任何答案，允许输入键一致地移动所有字段，包括使用任何类型的JavaScript的iframe。它不一定是jQuery特定的。

我已经尝试了几种不同的方法来解决这个问题，但没有找到任何工作。提前感谢任何有解决方案的人。

Answer 1

你需要关注的iframe里面，像这样：

var frameBody = $("#IFrame_input").contents().find("input"); 

frameBody.focus(); 

Answer 2

我要回答我的问题 - 几个小时，我能够通过扩大我的选择，包括解决我的使用情况后， iframe。然后我手动构建输入数组，并在迭代时检查了iframe的节点类型。如果/当我遇到一个iframe，我也做了同样的iframe内选择和iframe中添加的输入：

$(document).ready(function() { 
    // Parent level helper function 
    window.tabToNext = function(me) { 
    var selector = ':tabbable, iframe'; 

    var inputElems = []; 
    $(selector).each(function(index) { 
     var nodeName = $(this).prop('nodeName').toLowerCase(); 
     if (nodeName == 'iframe') { 
     $(this).contents().find(selector).each(function(index) { 
      inputElems.push(this); 
     }); 
     } else { 
     inputElems.push(this); 
     } 
    });  

    var inputs = $(inputElems); 
    var next = inputs.index(me) + 1; 
    if (next == inputs.length) next = 0; 

    var input = inputs.eq(next); 
    input.focus(); 
    return false; 
    } 

    $(document).on('keydown', 'input', function(ev) { 
    // Move to next on enter 
    if (ev.which === 13) { 
     return window.tabToNext(this); 
    } 
    }); 

    // Focus the first input 
    $('input[name=one]').focus(); 
}); 

FWIW：我不能只是扩大了选择，尽我可以告诉，也是我试图用$。新增建设从一个空的jQuery集合的集合：

var foo = $([]); 
foo.add(someElement); 

...但它不支持您添加的顺序。它会根据SEEMS应该是正确的文档重新排序，但由于某种原因，我的iframe子字段总是以最后一个结尾，并将Tab顺序搞乱。

无论如何，我希望如果别人有这个问题有一天你觉得这有帮助。工作液：

https://jsfiddle.net/wbs1zajs/6/