Cách tạo hộp văn bản động trong JavaScript

Một số người gọi nó là ma thuật - khả năng làm cho các vật thể xuất hiện đột ngột từ hư không. Bạn có thể tạo ra loại ma thuật này trên trang web của mình bằng cách sử dụng một vài dòng JavaScript. Ví dụ: hộp văn bản là các phần tử HTML tốt để sử dụng khi học cách làm cho các đối tượng xuất hiện động. Thay vì xây dựng chúng thành mã của bạn khi bạn thiết kế trang Web của mình, hãy thêm các hộp văn bản nếu cần và đồng thời gây ấn tượng với khách truy cập trang web.

Tạo hộp văn bản

Trước khi thực hiện hiện thực hóa hộp văn bản, bạn phải hiểu hộp văn bản là gì. HTML biết nó như một thẻ đầu vào như được hiển thị trong ví dụ sau:

Thẻ nhập này tạo một hộp văn bản có hai thuộc tính quan trọng; id và loại. Thuộc tính type, có giá trị là "text", yêu cầu trình duyệt tạo hộp văn bản thay vì một loại điều khiển khác, chẳng hạn như nút. Thuộc tính id, là tùy chọn, có thể hữu ích nếu bạn cần thao tác hộp văn bản sau này. Tùy chọn giá trị, cũng là tùy chọn, chứa giá trị bạn muốn thấy trong hộp văn bản khi trang Web mở ra.

Hộp văn bản động

HTML không quan tâm khi bạn xác định các thuộc tính của một phần tử miễn là bạn cung cấp cho chúng các giá trị ở đâu đó. Điều này có nghĩa là bạn có khả năng tạo động một phần tử hộp văn bản và đặt các thuộc tính của nó bất kỳ lúc nào bạn muốn. Hàm document.createElement làm cho điều này có thể thực hiện được như hình dưới đây:

var box = document.createElement ("đầu vào");

Đó là tất cả những gì cần thiết để tạo một phần tử đầu vào HTML và gán nó cho một biến có tên là "box". Đối tượng box sẽ không trở thành một hộp văn bản cho đến khi bạn cung cấp cho thuộc tính type của nó một giá trị là "text" như được hiển thị trong ví dụ này:

box.type = "text";

Tích hợp trang web

Đoạn mã dưới đây nối hộp văn bản vào tài liệu HTML. Bằng cách sử dụng hàm appendChild hữu ích:

document.body.appendChild (hộp);

Nếu bạn muốn nối hộp văn bản sau một điều khiển cụ thể, hãy sử dụng câu lệnh sau để thay thế:

document.getElementById ("some_Element_ID"). appendChild (box);

Thay thế "some_Element_ID" bằng tên của phần tử mà sau đó bạn muốn nối thêm hộp văn bản. Ví dụ: Nếu phần tử đó là một nút có ID là "button1", thì câu lệnh appendChild sẽ xuất hiện như sau:

document.getElementById ("button1"). appendChild (box);

Thuộc tính tùy chọn

Hộp văn bản mới của bạn sẽ hoạt động hoàn hảo khi sử dụng mã này. Chỉ cần tạo một hàm JavaScript có chứa câu lệnh và gọi nó bất cứ khi nào bạn cần một hộp văn bản. Tuy nhiên, bạn cũng có thể đặt giá trị và thuộc tính ID của hộp văn bản như sau:

box.value = boxValue; box.id = boxID;

Chuyển các giá trị của boxValue và boxID vào hàm và nó áp dụng các thuộc tính đó cho hộp văn bản. Nếu bạn chỉ định một giá trị ID, bạn có thể sử dụng nó sau này để cập nhật các thuộc tính của hộp văn bản như được hiển thị trong ví dụ bên dưới:

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "red";

Câu lệnh đầu tiên nhận được một tham chiếu đến hộp văn bản và câu lệnh cuối cùng thay đổi màu nền của hộp văn bản thành màu đỏ.

bài viết gần đây

$config[zx-auto] not found$config[zx-overlay] not found