Để thêm văn bản vào vùng văn bản, hãy truy cập thuộc tính value trên phần tử và đặt nó thành giá trị hiện tại cộng với văn bản sẽ được thêm vào, e. g. textarea.value += 'Appended text'. Thuộc tính giá trị có thể được sử dụng để lấy và đặt nội dung của phần tử vùng văn bản
Đây là HTML cho các ví dụ trong bài viết này
Append text
Và đây là mã JavaScript liên quan
Chúng tôi đã sử dụng thuộc tính value của phần tử textarea để nối văn bản vào nó
Hai dòng này đạt được cùng một kết quả
const textarea = document.getElementById['message'];
textarea.value += 'Appended text';
textarea.value = textarea.value + 'Appended text';
Cả hai đều nối văn bản vào cuối giá trị hiện tại của phần tử textarea
Để nối văn bản vào phần tử vùng văn bản khi nhấp
- Thêm một trình lắng nghe sự kiện
clickvào một phần tử - Mỗi lần nhấp vào phần tử, hãy cập nhật phần tử
valuecủa phần tử
0const textarea = document.getElementById['message']; textarea.value += 'Appended text'; textarea.value = textarea.value + 'Appended text';
Hàm
const textarea = document.getElementById['message'];
textarea.value += 'Appended text';
textarea.value = textarea.value + 'Appended text';
Bạn cũng có thể kiểm tra xem văn bản đã có trong
const textarea = document.getElementById['message'];
textarea.value += 'Appended text';
textarea.value = textarea.value + 'Appended text';
const textarea = document.getElementById['message'];
const btn = document.getElementById['btn'];
btn.addEventListener['click', function handleClick[] {
const text = 'Text to append';
if [!textarea.value.includes[text]] {
textarea.value += text;
}
}];
Chúng tôi đã sử dụng phương thức
const textarea = document.getElementById['message'];
textarea.value += 'Appended text';
textarea.value = textarea.value + 'Appended text';
Một số người gọi đó 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 loại phép thuật này trên trang web của mình bằng một vài dòng JavaScript. Ví dụ, các hộp văn bản là các thành phần 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 khi 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 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ư trong ví dụ sau
Thẻ đầu vào này tạo một hộp văn bản có hai thuộc tính quan trọng; . Thuộc tính loại, có giá trị là "văn bản", 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 với 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 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 thành phần hộp văn bản một cách linh hoạt và đặt các thuộc tính của nó bất kỳ lúc nào bạn muốn. Tài liệu. hàm createElement làm cho điều này có thể như hình dưới đây
hộp var = tài liệu. 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à "hộp. " Đối tượng hộp không trở thành hộp văn bản cho đến khi bạn đặt giá trị "văn bản" cho thuộc tính loại của nó như trong ví dụ này
hộp. gõ = "văn bản";
Tích hợp trang web
Đoạn mã dưới đây nối thêm hộp văn bản vào tài liệu HTML. sử dụng chức năng appendChild hữu ích
tài liệu. thân hình. appendChild[hộp];
Nếu bạn muốn nối thêm 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ế
tài liệu. getElementById["some_Element_ID"]. appendChild[hộp];
Thay thế "some_Element_ID" bằng tên của thành phần 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", câu lệnh appendChild sẽ xuất hiện như sau
tài liệu. getElementById["button1"]. appendChild[hộp];
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 các thuộc tính giá trị và ID của hộp văn bản như sau
hộp. giá trị = boxValue; . id = hộpID;
Truyền các giá trị của boxValue và boxID cho hàm và nó sẽ á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 để cập nhật các thuộc tính của hộp văn bản như trong ví dụ bên dưới
var boxObject = tài liệu. getElementById[boxID]; . Phong cách. nềnColor = "đỏ";
Câu lệnh đầu tiên lấy 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 đỏ
Hộp văn bản trong JavaScript là gì?
Hộp văn bản JavaScript - Trường văn bản hiện đại có nhãn nổi . Phiên bản mở rộng của phần tử đầu vào HTML hỗ trợ cả phiên bản thuần CSS và JavaScript thuần. Dễ dàng tạo các nhóm đầu vào với các biểu tượng, nút, văn bản trợ giúp và thông báo xác thực.Làm cách nào để thêm giá trị vào hộp văn bản bằng JavaScript?
Để gán giá trị cho hộp văn bản bằng JavaScript, bạn có thể sử dụng phương thức được xác định trước của JavaScript có tên là phương thức setAttribute[] hoặc thuộc tính giá trị của phần tử văn bản. Both of these approaches work efficiently for assigning value to the textbox. You can select one of them as per your requirement.