клавиши Enter на входе Автоматически Tab к следующему входу с полями в плавающих фреймах

Question

У меня есть форма с входами, которые также имеет IFrame, внедренный в форме, которая также имеет входы (псевдо HTML):

<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. Я знаю, что это не идеальная реализация. Тем не менее, я бы принял ЛЮБОЙ ответ, который позволяет клавише ввода перемещаться по всем полям последовательно, включая iframe, используя любой тип javascript. Это не обязательно для jQuery.

Я пробовал несколько разных подходов к решению этого вопроса, но ни один из них не нашел работы. Заранее благодарим любого, у кого есть решение.

Answer 1

Вы должны сосредоточиться внутри фрейма так:

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

frameBody.focus(); 

Answer 2

Я собираюсь ответить на мой собственный вопрос - после того, как несколько часов, я был в состоянии решить мой случай использования, расширяя мой селектор, чтобы включить 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: Я не мог просто расширить селектор, как лучшее, что я мог бы сказать, и я также пытался использовать $ .add для создания коллекции, начиная с пустым набором JQuery:

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

... но это не чтит заказ вы добавите. Он будет переупорядочивать DOM в соответствии с документами, которые SEEMS должны быть правильными, но по какой-то причине мои дочерние поля iframe всегда заканчивались последними и испортили порядок вкладок.

Во всяком случае, я надеюсь, что если кто-то еще у вас есть этот вопрос, когда-нибудь вы найдете это полезным. Рабочий раствор:

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