javascript - 我怎样才能捕捉到专注于隐藏物体的尝试？

Question

我构建了一个 jquery 扩展，它隐藏我的选择元素并添加自定义标记。这样我就可以设置元素的样式并执行一些自定义行为(例如向项目添加图像)

这是标记在一个简单示例中的样子:

<select id="original" style="display:none"><option value="1">1</option><select>
<ul id="new" class="select">
  <li>1</li>
</ul>

我还使用另一个 jquery-extension 来验证表单。如果某个字段无效，它会尝试聚焦该字段。浏览器不允许关注隐藏字段。这是一个问题，主要是因为如果该字段没有聚焦，浏览器将不会滚动到无效字段所在的位置。

我梦想的解决方案是添加一个监听器来尝试聚焦选择元素，但我无法使用正常的 $('parent').on('focus', "#original 。 ..)，因为事件不会在 display:none-objects 上触发。我也考虑过以其他方式隐藏元素，但至少 visibility:hidden 也不允许焦点。

如何聚焦原始元素或新元素？当尝试聚焦原始元素时？

Answer 1

我尝试将所有可能的事件添加到元素、文档和窗口中。尝试聚焦隐藏元素时不会触发任何内容。

我想出了一个解决方法:

1. 添加离屏输入和隐藏类:
   HTML: <input id="I0">
   CSS: #I0, .hidden {position: absolute; left: -999px;}

2. 在所有焦点调用的开头包含该输入:
   $('#I0, #Name').focus();

3. 添加此代码:
   

<小时/>

$('input, select').focus(function() {
  if($(this).data('invisible')) {
    //this will be run if the element is hidden
  }

  $('input, select').each(function() {
    $(this).data('invisible', !$(this).is(':visible'));
    if($(this).data('invisible')) {
      $(this)
        .show()
        .addClass('hidden');
      (function(self) {
        setTimeout(function() {
          self
            .hide()
            .removeClass('hidden');
        },0);
      })($(this));
    }
  });

});

Working Fiddle