Question

我们有一个界面设计，可以在常规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>

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

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

我尝试了表单的模糊事件，但后来发现它只是来自内部各个输入元素的模糊事件的冒泡，从而导致表单隐藏/提交仅仅丢失firstName输入的焦点;用户没有机会处理lastName输入。当然，如果我在每个输入字段上尝试了stopPropagation（），那么表单永远不会模糊，因为它没有自己的模糊事件。

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

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

Answer 1

发现jquery提供伪选择器检查“：focus ”;这样可以更容易地在表单级别监听模糊，但检查是否有任何其他兄弟输入元素在稍微延迟后获得焦点。

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

或者，选择器可以应用于'.form input'形式或其他一些后代选择器来覆盖感兴趣的输入字段。

HTML表单自动隐藏和提交模糊

1 个答案: