ASP.NET Core MVC: Unable to set focus on input element on view load

Question

ASP.NET Core MVC: Unable to set focus on input element on view load

Stanislav Panferov 50

I am trying to set focus using javascript on the first unfocused input element of MVC view in a load window event listener. But element is focused only after page reloading. Attached browser - MS Edge I tried reloading the page programmatically using window.location.reload, but it didn't have the same effect. Using setTimeout also was not helpful. This only works when previewing the page in Edge from Visual Studio. How to set focus correctly?

Test sample repo: https://github.com/pnfstas/TestFocus

HomeController:

using Microsoft.AspNetCore.Mvc;

namespace TestFocus.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Start()
        {
            return View("Start");
        }
    }
}

start.js:

start.js

Start.cshtml:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<form action="javascript:void(0);" method="post" style="width:500px;height:300px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;">
			<fieldset style="flex:auto;display:flex;flex-direction:column;justify-content:space-evenly;">
				<legend>Authentication</legend>
				<label id="username-label" for="UserName">User name:</label>
				<input class="user-property-input" id="UserName" name="UserName" type="text" />
				<label id="email-label" for="Email">E-Mail:</label>
				<input class="user-property-input" id="Email" name="Email" type="email" />
				<label id="phone-label" for="PhoneNumber">Phone number:</label>
				<input class="user-property-input" id="PhoneNumber" name="PhoneNumber" type="tel" />
			</fieldset>
			<span id="test-focus-span" style="margin-top:15px;"></span>
		</form>
		<script id="start" src="~/src/start.js" asp-append-version="true"></script>
	</body>
</html>

Qing Guo - MSFT 896 Reputation points Microsoft External Staff

2023-09-25T09:59:01.56+00:00

Hi @Stanislav Panferov ，

I test your project with Visual Studio 17.8.0 Preview 1.0 , and it's ok, you can have a try to update your Visual Studio .
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

3 answers

Your answer

Qing Guo - MSFT 896 Reputation points Microsoft External Staff

2023-09-25T09:59:01.56+00:00

Hi @Stanislav Panferov ，

I test your project with Visual Studio 17.8.0 Preview 1.0 , and it's ok, you can have a try to update your Visual Studio .
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Answer 1

AddWebSolution 171

Hi @Stanislav Panferov ,

Here is your solution:

https://stackoverflow.com/questions/4331022/focus-input-box-on-load

OR

You can also try this JavaScript function:

document.addEventListener('DOMContentLoaded', function() {
    var inputs = document.getElementsByClassName('user-property-input');

    for (var i = 0; i < inputs.length; i++) {
        if (!inputs[i].matches(':focus')) {
            inputs[i].focus();
            break;
        }
    }
});

Make sure to include this JavaScript file in your HTML:

Let us know if you need anything from our side.

Best Regards,

AddWebSolution

Stanislav Panferov 50 Reputation points

2023-10-02T20:09:46.5566667+00:00

Thanks for the answer. I tried your suggestion, but there is no result. In all cases, after calling focus(), the "focus" pseudo-class is set, but the element is not focused.

Answer 2

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Answer 3

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

2 deleted comments

Comments have been turned off. Learn more

Share via

ASP.NET Core MVC: Unable to set focus on input element on view load

3 answers

Your answer