如何检测隐藏元素是否获得焦点，然后将焦点传递给可见控件？

Question

我正在构建一个包含tag input的表单：

具体来说，我使用Tag Manager但是，其他库中存在此问题。

这些库通过隐藏原始puts [MY_FUNCTION] 并呈现自定义控件来工作。然后，他们会更新隐藏的input值，以便与表单数据一起发送。

我的原始加价看起来像这样：

input

调用插件后：

<form id="submitForm">
  <input type="text" name="tags" placeholder="Tags" class="tm-input"/>
  <input type="submit" value="Submit">
</form>

DOM更新为：

$(".tm-input").tagsManager();

麻烦的是，我使用valiation plugin来验证表单输入：

<form id="submitForm" novalidate="novalidate">
  <input type="text" name="tags" placeholder="Tags" class="tm-input">
  <input type="hidden" name="hidden-tags">
  <input type="submit" value="Submit">
</form>

当输入无效时，它会将焦点带到无效元素。在我的情况下，隐藏无效输入。我想要做的是，检测隐藏元素已被赋予焦点，然后在该处理程序中，将焦点放在可见控件上。我该怎么做？

我认为隐藏元素不会调用$("#submitForm").validate({ ignore: [], rules: { "hidden-tags": "required" } }); 函数，这就是问题所在。

Answer 1

您可以在输入元素上使用输入类型作为文本并显示：none，并且您将能够使用jquery验证器关注元素。

<form id="submitForm" novalidate="novalidate">
  <input type="text" name="tags" placeholder="Tags" class="tm-input">
  <input type="text" name="hidden-tags" style="display:none">
  <input type="submit" value="Submit">
</form>

Answer 2

  

当输入无效时，[plugin]会将焦点带到无效元素。在我的情况下，隐藏无效输入。

您正在谈论默认启用的the plugin's focusInvalid option。 focusInvalid选项只接受布尔值false来禁用此行为，但它不接受覆盖此默认行为的函数。

  

我想要做的是，检测隐藏元素是否已被赋予焦点，然后在该处理程序中，将焦点放在可见控件上。我该怎么做？

此插件中没有选项可将此焦点从正在验证（隐藏）的实际元素传输或“传递”到正在渲染的元素上。