Hướng dẫn active trong javascript

Question

Trong bài này chúng ta sẽ tìm hiểu thuộc tính document activeElement trong javascript. activeElement javascript giúp ta lấy phần tử HTML đang focus.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Thường thì activeElement sẽ trả về HTMLInputElement hoặc HTMLTextAreaElement nếu bạn đang lựa chọn tài liệu tại thời điểm chạy. Vì vậy, bạn có thể sử dụng thuộc tính selectStart và selectEnd để xem có phải không. Các trường hợp còn lại thì đa số là đang focus vào thẻ select hoặc input.

1. activeElement javascript là gì?

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, tức là nó phụ thuộc vào con trỏ chuột của chúng ta đang focus vào tài liệu HTML nào thì nó sẽ lấy tài liệu HTML đó.

Còn nếu muốn thiết lập focus tới một thẻ html nào đó thì sử dụng thuộc tính phương thức element.focus().

Bài viết này được đăng tại [free tuts .net]

Để tìm kiếm xem tài liệu nào có thể focus thì ta dùng phương thức document.hasFocus().

Cú pháp activeElement như sau:

Để lấy tên của thẻ HTML mà method này trả về thì ta sử dụng thuộc tính tagName.

document.activeElement.tagName

2. Ví dụ tổng hợp activeElement javascript

Hãy viết chương trình gắn sự kiện click vào thẻ body, hành động của sự kiện này là lấy đối tượng mà con trỏ focus, sau đó xuất thông báo cho người dùng biết là đang focus vào thẻ HTML nào.

Ta sẽ 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:

<body onclick="myFunction()">
    <h2>Học lập trình miễn phí tại freetuts.net</h2>
    <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>

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.

Trên là phần hướng dẫn sử dụng activeElement trong javascript.

bạn phải đặt id hoặc class riêng biệt cho mỗi menu. mỗi lần lưu lại vào localStorage thì b lưu cái id. mỗi cái id cho từng menu phải khác nhau. Sau đấy khi b load lại trang thì bạn so sánh cái id trùng với div nào thì bạn add thêm class active cho div đó chứ không phải là lưu vào localStorage đều chung tên active như vậy thì nó biết cái nào là đang active chứ nhỉ. Với đoạn code của bạn có thành sửa thành như sau :

$(document).ready(function(){
        var menuClass = localStorage.getItem('menuClass')

        var element = document.getElementById(menuClass);

        if (element) {
          element.classList.add('active');
        } else {
          element = document.getElementById("home");
          element.classList.add('active');
        }

        $(".toggle").click(function () {
          $(this).toggleClass("active");
          $('.navigation').toggleClass("active");
        });

        $(document).on('click', 'ul .list', function () {
          let menu = $(this).attr("id")

          $(this).addClass('active').siblings().removeClass('active');

          localStorage.setItem('menuClass', menu);
        })
})