离开视口后从表单元素中移除键盘焦点答案

【问题标题】：Remove keyboard focus from a form element after it goes out of viewport离开视口后从表单元素中移除键盘焦点
【发布时间】：2019-11-19 09:31:12
【问题描述】：

我如何使用相对较新的Intersection Observer API 来检测当前关注的input 何时超出viewport，这样当它发生时，对input 的关注就会被移除？

该解决方案应该适用于 iOS 版 Safari。

到目前为止，这是我的代码：

document.addEventListener("DOMContentLoaded", _ => {
  const focusedInput = document.activeElement
  
  // ?
  focusedInput.blur()
})

html { height: 100% }

html, body, main, section {
  display: flex;
  flex-grow: 1
}

main { flex-direction: column }

section {
  justify-content: center;
  align-items: center;
  flex: 1 0 100%
}

<main>
  <section>
    <form action=submit method=post>
      <fieldset>
        <legend>Enter Your Details</legend>
        <label>Email<br><input type=email name=email placeholder=jane@example.com></label><hr>
        <label>Message<br><textarea name=briefing placeholder="Lorem ipsum dolor sit amet."></textarea></label><hr>
        <input type=submit value=Submit>
      </fieldset>
    </form>
  </section>
  <section>
    <h2>Second Page</h2>
  </section>
</main>

【问题讨论】：

标签： javascript ecmascript-6 viewport blur intersection-observer

【解决方案1】：

在您链接的文档中，有一个小提琴为什么不用呢？

只需将其修改为..

document.addEventListener("DOMContentLoaded", _ => {
    let observerOptions = {
        root: null,
        rootMargin: "0px",
        threshold: [0, 0.1, 0.99]
    };

    let intersectionCallback = (entries) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio == 0) { // fully invisible
          //document.activeElement.blur()
        }
        if (entry.intersectionRatio < 1) { // partially invisible
          document.activeElement.blur()
        }
      });
    }
    
    let observer = new IntersectionObserver(intersectionCallback, observerOptions);
    observer.observe(document.querySelector("#myForm"));
  
})

html { height: 100% }

html, body, main, section {
  display: flex;
  flex-grow: 1
}

main { flex-direction: column }

section {
  justify-content: center;
  align-items: center;
  flex: 1 0 100%
}

<main>
  <section>
    <form action=submit method=post id=myForm>
      <fieldset>
        <legend>Enter Your Details</legend>
        <label>Email<br><input type=email name=email placeholder=jane@example.com></label><hr>
        <label>Message<br><textarea name=briefing placeholder="Lorem ipsum dolor sit amet."></textarea></label><hr>
        <input type=submit value=Submit>
      </fieldset>
    </form>
  </section>
  <section>
    <h2>Second Page</h2>
  </section>
</main>

【讨论】：

在浏览器堆栈 iOS13 Safari 上检查 - 它可以工作。在小提琴中，它仅用于形成。您可以轻松地将其扩展到特定领域。

【解决方案2】：

我用你描述的行为创建了一个 jsfiddle：

var intersectionObserver = new IntersectionObserver(function(entries) {
  if (entries[0].intersectionRatio <= 0){
    console.log("the field is not visible");
    //Add your blur code here
  }else{
    console.log("the field is visible")
  }
});

// start observing
intersectionObserver.observe(document.querySelector('#emailtwo'));

观察者检查intersectionRatio，如果ratio

JSFiddle：https://jsfiddle.net/0f9Lkbgc/1/

【讨论】：