当我从触摸事件侦听器调用 input.focus()
时,它将焦点的输入聚焦为几个ms,但焦点立即回到触摸元素上。我还测试了手机上的(真实触摸设备(,而行为是相同的。我试图搜索有关此文件的一些文档,但没有发现任何有用的文档。
我使用的唯一当前解决方法是setTimeout(() => input.focus(), 500)
,这是做到这一点的非常草率的方法。有什么想法吗?
https://codepen.io/xpuu/pen/bxpbzy
document.addEventListener("DOMContentLoaded", function() {
let input = document.getElementById("test");
let events = {
click(e) {
console.log("click");
input.focus();
},
touchstart(e) {
console.log("touchstart");
input.focus();
},
touchend(e) {
console.log("touchend");
input.focus();
},
touchprevent(e) {
console.log("touchprevent");
e.preventDefault();
input.focus();
},
touchtimeout(e) {
console.log("touchtimeout");
setTimeout(() => input.focus(), 500);
}
};
let buttons = document.getElementById("buttons");
let validEvents = ["click", "touchstart", "touchend"];
Object.keys(events).forEach(key => {
let handler = key;
let btn = document.createElement("button");
btn.innerText = key;
if (!validEvents.includes(handler)) {
handler = "touchstart";
}
//console.log(handler, key);
btn.addEventListener(handler, events[key]);
buttons.appendChild(btn);
});
});
input {
padding: 3px;
}
<p>Enable devtools / responsive mode and touch emulation for this to work</p>
<input id="test" value="focus me please">
<p id="buttons"></p>
正如克里斯(Chris(所述,您必须在集中输入之前运行e.preventDefault()
。此外,在addEventListener
选项中禁用passive
处理程序很重要。
let touchprevent = e => {
console.log("touchprevent");
e.preventDefault();
input.focus();
}
input.addEventListener('touchstart', touchprevent, { passive: false });