focusout 在 focus() 之后立即发生

Question

我正在创建 'typeform like' 表单，一次滚动一个输入元素。

name -> email -> phone -> address -> note
(codepen here)

使用下面的代码，我遇到的情况是在输入 phone 的值并按回车键后，address 被跳过。流量直达note.
原因是 focusout 事件在 input#address.input-box 上的 target.find(".input-box").focus() 之后立即被触发。

我不明白是什么导致 focusout 被解雇。
谁能解释一下？（以及如何阻止它发生）。

目的是让 phone 元素在用户在移动设备上输入内容后滚动。例如，在 iOS 上，phone 条目没有回车键，只有 'Done'.
我使用 focusout 因为它是在按下 'Done' 时触发的事件。但它被广泛使用，无法正常使用。有没有更好的方法来实现预期的行为？

HTML:

<!-- ... -->
  <div class="flex-container">
    <form novalidate="">
      <div class="input-block flex-item" id="input-block-name" style="display: inherit;">
        <div class="label">name</div><input class="input-box" type="text" id="name">
      </div>
      <div class="input-block flex-item" id="input-block-email" style="display: none;">
        <div class="label">email</div><input class="input-box" type="email" id="email">
      </div>
      <div class="input-block flex-item" id="input-block-phone" style="display: none;">
        <div class="label">mobile</div><input class="input-box" type="tel" id="phone">
      </div>
      <div class="input-block flex-item" id="input-block-address" style="display: none;">
        <div class="label">address</div><input class="input-box" type="text" id="address">
      </div>
      <div class="input-block flex-item" id="input-block-note" style="display: none;">
        <div class="label">note</div><input class="input-box" type="text" id="note">
      </div>
<!-- ... -->
    </form>
<!-- ... -->

JS:

$(".input-box").first().focus();
$(".input-block")
  .not($(document.activeElement.parentElement))
  .css({ display: "none" });

$(window).on(
  "keyup wheel focusout",
  _.debounce((event) => {
    var current = $(":visible").closest(".input-block");

    // next
    if (
      event.key === "Enter" ||
      event.originalEvent.deltaY > 0 ||
      (event.type == "focusout" && event.target == $("#phone")[0])
    ) {
      var target = $(":visible").closest(".input-block").next();

      target.css({ display: "inherit" });
      target.find(".input-box").focus();
      current.css({ display: "none" });
    }

    // prev
    if (event.originalEvent.deltaY < 0) {
      var target = $(":visible").closest(".input-block").prev();

      target.css({ display: "inherit" });
      target.find(".input-box").focus();
      current.css({ display: "none" });
    }
  }, 30)
);

编辑：在第一次回复后完善了问题。

Answer 1

OP 编辑：'solved' 问题是使用 blur 事件（见评论）。

我认为您的问题出在这一行（在 if 条件下）：

(event.type == "focusout" && event.target == $("#phone")[0])

每次滚动都会有一个来自上一个输入的 'focusout' 类型。当您从 phone 滚动到地址时，phone 输入框的类型为 'focusout' 并且上面引用的代码条件为真，因此条件的结果发生两次。

完全删除上面引用的行应该可以解决您的问题。

focusout 在 focus() 之后立即发生

focusout happening immediately after focus()

javascript

forms

jquery

dom-events