仅使用脚本设置对输入的关注
我试图将焦点设置在没有显式鼠标事件的文本输入上，只是基于 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>
弑天下浏览 144回答 3
3回答
-
温温酱
您的代码工作正常，只是不在 jsFiddle 或 Stack Overflow 代码段 iframe 中。原因是当您单击“运行”时，您实际上将焦点转移到另一个页面（另一个窗口元素）。因此，在超时模拟按钮上的点击之后，您的元素可以正常聚焦，但您的页面却没有，因此您看不到它。您可以尝试将延迟设置为 5 秒，然后在超时模拟单击之前单击预览窗口上的任意位置，您将看到您的输入将具有与单击按钮时完全相同的焦点。您还可以访问当前聚焦的元素document.activeElementvar 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> -
湖上湖
您的代码运行良好。似乎它不仅适用于 JS Fiddle。那么你可以使用 "input type="text" autofocus=true 。 -
HUH函数
没有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>
随时随地看视频慕课网APP
相关分类
JavaScript