Introduction to document.activeELement focus element in JavaScript

Preface:

Sometimes you need to get which element the page focus is on. The focus can be used to determine whether the user is operating the page and other information. It was not convenient before because you had to record it yourself. html5了document.activeElement屬性to get the currently active focus.

1. The default focus is on the body

After the page loads, document.activeElement is on body:

console.log(document.activeElement);

// Console print:

//body

2. Manually get the focus of the text box

The most common way to get focus is with form elements. Here we take a text box as an example:

<input type="text" id="name" />

When you put the cursor in the text box, view the document.activeElement object in the console.

document.activeElement:

It is the text box that gets the focus above.

3. Get focus through focus

In addition to manually placing it in the text box to let the text box get the focus, you can also use focus() method to let the text box get the focus.

<input type="text" id="name" />

<script type="text/javascript">

    // Get the angle of the text box document.querySelector("#name").focus();

    console.log(document.activeElement);

    // Firefox browser console prints:

    // <input id="name" type="text">

</script>

4. Tab switch focus

You can switch focus through tab on the web page. Let’s try another button:

<input type="text" id="name" />

<button>Click me</button>

To facilitate viewing the effect, set a timer to print document.activeElement after 5 seconds:

setTimeout(() => {

    console.log(document.activeElement);

    // Firefox browser console prints:

    // <button>

}, 5000);

Visit the page, switch to the button via tab, and then view the console output:

Tab switch focus:

5. document.hasFocus() determines whether to obtain focus

Similarly set the timer to view:

setTimeout(() => {

    console.log(document.hasFocus());

}, 5000);

• When accessing a page, if you switch to another page and come back to check after 5 seconds, it will be false . Indicates that the user is not operating the page.
• If you stay on the page or operate on the page, then return true, which can be used to determine whether the user is operating the page.

This is the end of this article about the document.activeELement focus element in JavaScript . For more information about the document.activeELement focus element in JavaScript , please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!