在离开视口后从表单元素中移除键盘焦点
Remove keyboard focus from a form element after it goes out of viewport
我如何使用相对较新的 Intersection Observer API
来检测当前聚焦的 input
何时超出 viewport
,以便当它出现时,聚焦 [=14] =] 被删除了?
该解决方案应该在 Safari 中适用于 iOS。
到目前为止,这是我的代码:
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>
在您链接的文档中有一个 fiddle
为什么不用呢?
只需将其修改为...
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>
我用您描述的行为创建了一个 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 <= 0 则表示该元素不在屏幕上。
JSFiddle:https://jsfiddle.net/0f9Lkbgc/1/
我如何使用相对较新的 Intersection Observer API
来检测当前聚焦的 input
何时超出 viewport
,以便当它出现时,聚焦 [=14] =] 被删除了?
该解决方案应该在 Safari 中适用于 iOS。
到目前为止,这是我的代码:
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>
在您链接的文档中有一个 fiddle 为什么不用呢?
只需将其修改为...
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>
我用您描述的行为创建了一个 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 <= 0 则表示该元素不在屏幕上。
JSFiddle:https://jsfiddle.net/0f9Lkbgc/1/