上輸入在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/