我试图将焦点设置在没有显式鼠标事件的文本输入上，只是基于 javascript 的事件。运行我的脚本后，我希望突出显示输入并显示光标栏。单击运行相同代码的按钮将产生所需的结果。问题是我怎样才能用纯事件来做到这一点？更新：我正在重新创建一种我无法控制正在发布的 HTML 的情况。很抱歉把那部分遗漏了。var input = document.querySelector("input");var btn = document.querySelector("#btn");btn.addEventListener("click", function(event){ //when triggered by a mouse click on the button, produces desired result console.log("click"); input.focus();});setTimeout(function(e){ var event = new Event("click"); //does not produce desired result btn.dispatchEvent(event); //does not produce desired result btn.click();}, 1000);<input type="text"><button id="btn">button</button>
3 回答
温温酱
TA贡献1752条经验 获得超4个赞
您的代码工作正常，只是不在 jsFiddle 或 Stack Overflow 代码段 iframe 中。
原因是当您单击“运行”时，您实际上将焦点转移到另一个页面（另一个窗口元素）。因此，在超时模拟按钮上的点击之后，您的元素可以正常聚焦，但您的页面却没有，因此您看不到它。
您可以尝试将延迟设置为 5 秒，然后在超时模拟单击之前单击预览窗口上的任意位置，您将看到您的输入将具有与单击按钮时完全相同的焦点。您还可以访问当前聚焦的元素document.activeElement
var input = document.querySelector("input");
var btn = document.querySelector("#btn");
console.log('active element:', document.activeElement);
btn.addEventListener("click", function(event) {
//when triggered by a mouse click on the button, produces desired result
console.log("click");
input.focus();
});
setTimeout(function(e) {
var event = new Event("click");
//does not produce desired result
btn.dispatchEvent(event);
//does not produce desired result
btn.click();
console.log('active element:', document.activeElement);
}, 5000);
<input type="text" />
<button id="btn">
button
</button>
HUH函数
TA贡献1836条经验 获得超4个赞
没有java脚本，我们可以使用css自动聚焦文本框
https://www.tutorialspoint.com/online_css_editor.php
<head>
<style>
input[type=text]:focus{ outline: 3px solid red; }
</style>
</head>
<input type="text" style="height: 28px; width:350px; " autofocus>
添加回答
举报
0/150
提交
取消