Setting focus on input with script only
Question
I am trying to set focus on a text input without explicit mouse events, just javascript based events.
After running my script I would expect the input to be highlighted and the cursor bar to be present.
Clicking on the button which runs the same code will produce the desired result.
The question is how can I do this with pure events?
UPDATE: I am recreating a situation where I am not in control of the HTML being published. Apologies for leaving that part out.
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>
4 answers
solution1
2 ACCPTED 2019-10-19 05:50:17
Your code works fine, only not in the jsFiddle or in a Stack Overflow snippet iframe.
The reason is when you click "Run" your actually giving focus to another page (another window element). So after the timeout simulates the click on the button your element is focused alright, but your page is not, so you can't see it.
You can try setting the delay to 5 seconds, then click anywhere on the preview window before the timeout simulates the click, and you will see that your input will have focus exactly like when clicking on the button. You can also access the current focused element with 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>
solution2
2 2019-10-19 05:53:08
Your code is working fine. It seems like it is not working only at JS Fiddle. Well you can use "input type="text" autofocus=true.
solution3
1 2019-10-19 06:27:11
Without java script we can auto focus the text box using 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>
solution4
0 2019-10-19 05:45:54
I'm not sure what events you're talking about but you can call scripts on the load of a page in the body onload attribute? This will highlight the input when you load the page for example:
<html>
<body onload='document.querySelector("input").focus()'>
<input type="text" />
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.