在 iFrames 中使用字段自动在输入上输入键 Tab 到下一个输入

Posted 2023-05-09

【中文标题】在 iFrames 中使用字段自动在输入上输入键 Tab 到下一个输入

【英文标题】：Enter Key on Input Automatically Tab to Next Input with Fields in iFrames

【发布时间】：2017-06-29 21:33:49

【问题描述】：

我有一个带有输入的表单，该表单还嵌入了一个 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" />

当用户按下选项卡时，即使在 三个 之后选择 bacon 的 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 输入键代码从不关注 bacon 字段，它会直接跳过它。 jsfiddle：

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

让我们都跳过包括不使用 iFrame 的答案。我知道这不是一个理想的实现。但是，我会接受任何允许回车键在所有字段中移动的答案，包括使用任何类型的 javascript 的 iframe。它不必是特定于 jquery 的。

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

【参考方案1】：

您需要像这样关注 iframe 内部：

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

frameBody.focus();

【参考方案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);

...但它不遵守您添加的顺序。它将根据看起来应该是正确的文档重新排序到 DOM，但由于某种原因，我的 iframe 子字段总是最后结束并弄乱了 tab 顺序。

无论如何，我希望有一天如果其他人遇到此问题，您会发现这对您有所帮助。工作解决方案：

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

【讨论】：

此外，您可能在小提琴中看不到的是 iframe 小提琴回调父小提琴以使导航无缝工作，这意味着相同的来源策略 - 请注意。