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

Question

我如何使用相对较新的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>

Answer 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>

Answer 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，如果比率<= 0，则表示该元素不在屏幕上。

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