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.

test php

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:

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.

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Document activeElement trong Javascript

1. activeElement javascript là gì?

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

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Document activeElement trong Javascript

1. activeElement javascript là gì?

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

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript