06/04/2021, 14:48

Hàm document.activeElement trong Javascript - Javascript Function

Code RUN <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> </style> </head> <body onclick="myFunction()"> <h1>Học lập trình miễn phí tại ...

Thuộc tính activeElement sẽ lựa chọn phần tử hiện đang được focus trong tài liệu. Thuộc tính này chỉ có quyền read-only. Để focus một phần tử chúng ta sử dụng phương thức element.focus()

Để tìm kiếm xem tài liệu nào đã được focus, sử dụng phương thức document.hasFocus().

Cú pháp

Cú phápdocument.activeElement

Cách sử dụng

Sử dụng thuộc tính activeElement để tìm kiếm phần tử hiện đang được focus và hiển thị chúng:

Code RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        </style>
    </head>
    <body onclick="myFunction()">
        <h1>Học lập trình miễn phí tại Zaidap.com.net</h1>
        <p>Các bạn click vào bất cứ điểm nào trên trang để tìm phần tử đang được focus</p>
        <input type="text" value="Thẻ Input">
        <button>Thẻ Button</button>
        <p id="result"></p>
 
        <script>
            function myFunction() {
                var x = document.activeElement.tagName;
                document.getElementById("result").innerHTML = 
                "bạn đang focus vào thẻ " + x;
            }
        </script>
    </body>
</html>

Trong ví dụ, mình có đặt sự kiện onclick() vào thẻ body có thể một số bạn sẽ nhầm lẫn giữa focus và click. Một cách thủ công để focus một phần tử là click vào nó. Vậy khi bạn click vào thẻ input, sự kiện click vẫn sẽ xảy ra vì nó nằm trong thẻ body, tuy nhiên phần tử được focus lại là thẻ input chứ không phải body.

Tham khảo: w3schools.com

Nguồn: Zaidap.com.net

Hoàng Hải Đăng

24 chủ đề

7226 bài viết

Cùng chủ đề
0