Question

我已经构建了一个jquery扩展，它隐藏了我的select-elements并添加了自定义标记。这样我就可以设置元素的样式并执行一些自定义的behvaiour（比如将图像添加到项目中）

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

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

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

我的梦想解决方案是添加一个用于尝试聚焦select元素的侦听器，但我无法使用普通$('parent').on('focus', "#original ...)，因为事件不会触发{{{} 1}} - 对象。我还考虑过以其他方式隐藏元素，但至少display:none不允许焦点。

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

Answer 1

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

我想出一个解决方法：

添加屏幕外输入和隐藏类：
HTML： <input id="I0">
CSS： #I0, .hidden {position: absolute; left: -999px;}
在所有焦点调用开始时包括输入：
$('#I0, #Name').focus();
添加此代码：

$('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

如何尝试关注隐藏的对象？

1 个答案: