0

我们有一个界面设计，在常规 HTML 元素中显示数据字段，并且仅在用户单击显示元素时公开输入表单。

<div class="header-container">
    <header class="header-displayName"></header>

    <form class="form" style="display: none;">
    <section><label>First Name</label>
        <span><input type="text" class="form-input" placeholder="first name"></span></section>
    <section><label>Last Name</label>
        <span><input type="text" class="form-input" placeholder="last name"></span></section>
        <div class="hidden-submit"><input type="submit" tabindex="-1"/></div>
    </form>
</div>

在上面的例子中，用户点击了 header 元素，该元素已在 jquery 中连接以隐藏自身并显示表单。按下 Enter 键后，表单也会隐藏自身并显示标题，同时发出 Ajax 请求以提交表单数据。

现在的问题是下一步如何增强用户体验，用户在表单中点击或点击到文档的其他位置将使表单意识到它需要像往常一样隐藏和提交。

我尝试了表单的模糊事件，但后来意识到它只是内部单个输入元素的模糊事件冒泡，从而导致表单隐藏/提交只是失去了名字输入的焦点；用户没有机会处理 lastName 输入。当然，如果我在每个输入字段上都尝试了 stopPropagation()，那么表单永远不会模糊，因为它自己没有模糊事件。

如何在表单级别可靠地捕获模糊事件？

为了给这个实现提供更多的上下文，它是一个可重用的 UI 组件，所以它并不是真正静态地放置在单页文档中。它们甚至可能在同一个文档中出现多次。他们不应该在文档级别进行任何可能会弄乱其他组件的接线。此类表格中的所有字段也是可选的，因此不能指望在提交之前填写所有字段。

4

1 回答 1

0

发现jquery提供了一个伪选择器检查“ :focus ”；这使得在表单级别监听模糊变得更容易，但检查是否有任何其他同级输入元素在稍有延迟后获得焦点。

setTimeout(function(){
  if (!$('.form-input').is(':focus')) {
    $('.form').submit();
  }
}.bind(this), 10);

或者，选择器可以应用于表单“.form input”或其他一些后代选择器以覆盖感兴趣的输入字段。

于 2012-11-22T01:51:58.250 回答