js function jpg Các hàm Javascript

Quảng cáo

Tinohost giảm 30% VPS/Hosting các bạn ạ. Đây là nhà cung cấp đứng top tại Việt Nam, xem tại đây

Document activeElement trong Javascript

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.

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 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.

Quảng cáo

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().

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

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

Cú pháp activeElement như sau:

Quảng cáo

document.activeElement

Để 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:

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

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.

Quảng cáo

Quảng cáo

Các chủ đề liên quan:

Bài viết cùng chuyên mục:

Quảng cáo

Top