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" />

当用户按Tab键时，即使在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一样集中在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：我不能只是尽可能地扩展选择器而且我还尝试使用$ .add来构建从空jQuery集合开始的集合：

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

...但它不尊重您添加的订单。它将根据SEEMS应该是正确的文档重新排序到DOM，但由于某种原因，我的iframe子字段总是最后结束并且搞乱了Tab键顺序。

无论如何，我希望如果有人在某一天有这个问题，你会发现这个问题很有帮助。工作解决方案：

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

在输入上输入键自动选项卡到下一个输入，其中包含iFrame中的字段

2 个答案: