Blazor Coding Training

Counter

Current count: 0

Focus Changing

Use an event to set the focus to a DOM element

In the following example, the @onclick event handler for the <button> element sets the focus on the <input> element. The @onfocus event handler of the <input> element displays the message "Received focus" when the element gets the focus. The <input> element is referenced through the InputField variable in the code:

An app should only direct the focus to a specific control for a specific reason, such as to ask the user to modify input after an error. Don't use focusing to force the user to navigate through the elements on a page in a fixed order; this can be very frustrating to the user who might want to revisit elements to change their input.

Alert Hello World

Clicking on Divs

Some events in a child element in the DOM can trigger events in their parent elements. In the following example, the <div> element contains an @onclick event handler. The <button> inside the <div> has its own @onclick event handler. Additionally, the <div> contains an <input> element: