Can the cursor go directly to the input when the web page is on?

Question

I was asked to develop a web page without a mouse. The keyboard cursor must be in the input area(example: <input id="input-label" type="text">) immediately when the page is changed.

I tried,

document.querySelector("#input-area").focus();

and

document.querySelector("#input-area").select();

It works with buttons, but does not work in DOMContentLoaded.

document.addEventListener("DOMContentLoaded", function(){
  document.querySelector("#input-area").select();
});

How can I solve it?

https://stackoverflow.com/questions/3383429/setting-focus-on-an-html-input-box-on-page-load#3383468 Duplicate question — Tushar, Jun 12 '18 at 06:04
Possible duplicate of [Setting focus on an HTML input box on page load](https://stackoverflow.com/questions/3383429/setting-focus-on-an-html-input-box-on-page-load) — Tushar, Jun 12 '18 at 06:05

Saurin Vala · Answer 1 · 2018-06-12T05:49:29.077

1

try this, call it when dom is ready

$(document).ready(function () {
    $("#input-area").focus();
});

OR

 <input id="input-area" autofocus="autofocus" />

OR

$(function() {
  $("#input-area").focus();
});

edited Jun 12 '18 at 05:49

answered Jun 12 '18 at 05:44

Saurin Vala

1,898
1
17
23

1

Whats the error in console ... did you include jquery ? @Centell – anees Jun 12 '18 at 06:01
yep, jquery included. I tried .ready either. and no errors appear.. I can't understand why id doesn't work. but the `autofocus` works well. It only need `` – Centell Jun 12 '18 at 06:06

score 1 · Answer 2 · answered Jun 12 '18 at 06:06

Try this code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>


<script>
$(document).ready(function(){
    $('#myAnchor').click(function() {
        $('#mustfocus').focus();
    });

});
</script>

</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>


</body>
</html>

How about this one which triggers only during DOM is ready:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>


<script>
$(document).ready(function(){
        $('#mustfocus').focus();
});
</script>

</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>


</body>
</html>

Can the cursor go directly to the input when the web page is on?

2 Answers2