.focus() is used to focus on interactive elements, such as automatically focusing the input box after the page is loaded or jumping the focus when the form verification fails; .blur() is used to remove the focus, such as clearing the focus when canceling the highlight after submitting the form or closing the pop-up window; when using it, make sure that the element is focused and has been inserted into the DOM, pay attention to the consistency of the mobile terminal behavior, and avoid frequent calls that cause focus jitter or abnormal page scrolling.

Sometimes, page interaction requires us to actively control the focus state of the element, such as automatically focusing on the input box, moving the focus back to the button when closing the pop-up window, etc. At this time, you need to use the DOM methods .focus() and .blur() .

However, these two methods seem simple, and there are still some details that need to be paid attention to in actual use, especially in terms of different browser behavior and accessibility.

When should I use .focus()

The most common use of .focus() is to allow users to quickly enter a certain operation link, such as after the page is loaded, let the cursor appear directly in the search box:

 document.querySelector('#searchInput').focus();

Or when form verification fails, automatically jump to the first error field to facilitate user modification.

Sometimes it also needs to be used in combination with event triggers, such as clicking the "Edit" button, making a certain content area editable and automatically gaining focus.

Recommended usage:

• Make sure that the target element is focused (such as <input> , <textarea> , <button> or elements with tabindex added).
• Before using the dynamically created element, make sure it has been inserted into the DOM.
• Note that the mobile behavior may be inconsistent, and some mobile browsers will ignore focus() call by the program.

When should I use .blur()

.blur() is used to remove the focus of the current element, and is often used to hide the input method soft keyboard or cancel the highlight state. For example, after submitting a form, you want the input box to no longer be highlighted:

 document.querySelector('#username').blur();

There is another common scenario where when you click on the external area to close the pop-up window, you need to lose focus on the previously focused element to prevent the keyboard from touching it accidentally.

Recommended usage:

• Do not abuse .blur() , otherwise it may interrupt the user's normal input process.
• If you listen to focus and blur events, consider whether the logic will trigger additional side effects when calling .blur() .
• Under some browsers, blur() may not immediately shift the focus to other places, but instead return to the root of the document.

Avoid issues caused by focus/blur

Sometimes you accidentally call .focus() or .blur() continuously, which may lead to some unexpected behavior, such as:

• Page scrolling exception (browser automatically scrolls to the focused element)
• The mobile soft keyboard pops up repeatedly and closes
• Multiple components seize the focus between each other, causing "focus jitter"

These problems are usually due to the wrong call timing, or the lack of determining whether it is currently in focus.

Common solutions:

• Check whether document.activeElement is the target element before calling .focus() .
• Use setTimeout to delay execution of certain focus switching logic to avoid conflicts.
• During component development, encapsulate focus management logic to avoid multiple modules operating the same element at the same time.

Basically that's it. .focus() and .blur() are very basic methods, but they are easy to get stuck in complex interactions, especially compatibility and user experience. Mastering their timing and precautions can make your interface more natural and smooth.

The above is the detailed content of How to manage focus (.focus(), .blur()) on DOM elements?. For more information, please follow other related articles on the PHP Chinese website!