Cách lưu giá trị textarea trong HTML

❮ Đối tượng Textarea

Ví dụ

Thay đổi nội dung của vùng văn bản

tài liệu. getElementById["myTextarea"]. value = "Đại lộ số 5, Thành phố New York";

Tự mình thử »

Định nghĩa và cách sử dụng

Thuộc tính giá trị đặt hoặc trả về nội dung của vùng văn bản

Ghi chú. Giá trị của một vùng văn bản là văn bản giữa các thẻ

Hỗ trợ trình duyệt

Giá trị tài sản Có Có Có Có Có

cú pháp

Trả về thuộc tính giá trị

Đặt thuộc tính giá trị

đối tượng vùng văn bản. giá trị = văn bản

Giá trị tài sản

ValueDescriptiontextChỉ định giá trị [nội dung] của vùng văn bản

chi tiết kỹ thuật

Giá trị trả về. Một chuỗi, đại diện cho nội dung/văn bản của vùng văn bản

Thêm ví dụ

Ví dụ

Lấy nội dung của một vùng văn bản

var x = tài liệu. getElementById["myTextarea"]. giá trị;

Tự mình thử »

❮ Đối tượng Textarea

Trong bài đăng trên blog này, chúng ta sẽ tìm hiểu cách lưu giá trị Textarea vào tệp bằng HTML và Javascript. Trong các dự án của chúng tôi, chúng tôi có thể gặp một số tình huống khi chúng tôi muốn lưu trữ văn bản do người dùng nhập vào bên trong một tệp theo chương trình

Hôm nay chúng ta sẽ xây dựng một dự án javascript đơn giản, trong đó chúng ta sẽ lưu trữ văn bản do người dùng nhập vào một tệp theo chương trình. Và sau khi lưu tệp sẽ được tải xuống. Đây là video demo của dự án của chúng tôi

Như bạn có thể thấy trong video demo ở trên, chúng tôi đã tạo một biểu mẫu HTML đơn giản với đầu vào vùng văn bản để nhập văn bản, hộp nhập để nhập tên tệp và nút Lưu & Tải xuống.  

Khi người dùng nhấn vào nút lưu và tải xuống, chúng tôi sẽ lưu nội dung của vùng văn bản vào một tệp. Chúng tôi đặt tên tệp bằng tên tệp do người dùng nhập và tệp sẽ được tải xuống

Cách lưu vùng văn bản/giá trị đầu vào vào tệp văn bản trong Javascript

Để bắt đầu, trước tiên hãy tạo một biểu mẫu đơn giản bằng HTML và CSS để nhập dữ liệu văn bản và tên tệp. Sau đó, chúng tôi sẽ lưu dữ liệu văn bản vào một tệp và tải xuống bằng javascript

Tạo biểu mẫu HTML để nhập văn bản và tên tệp

  
Save Text to File

  
    
    
    
  

Trong mã HTML ở trên, chúng tôi đã thêm phần tử để nhập văn bản, thêm đầu vào loại `text` để nhập tên tệp và thêm nút gửi đầu vào có giá trị `Save & Download`. Bây giờ, hãy tạo kiểu cho biểu mẫu này bằng CSS

styles.css

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #093666;
}

.form-card {
  width: 25rem;
  gap: 1rem;
  background-color: #ffffff;
  border-radius: 0.3rem;
  padding: 1.5rem;
}

h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #404656;
  margin-bottom: 1rem;
}

input[type='text'], textarea {
  width: 23rem;
  border: none;
  border-radius: 0.2rem;
  background-color: #e6ebf0;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

input[type='submit'] {
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: 0.2rem;
  color: #ffffff;
  background-color: #062647;
  padding: 0.8rem 1rem;
  cursor: pointer;
}

input[type='submit']:hover{
  color: #ffffff;
  background-color: #093666;
}

Ở đây chúng tôi có một số phong cách để textarea, input[type=’text’] và input[type=’submit’]. Sau khi thêm các kiểu này, biểu mẫu của chúng tôi trông giống như thế này

Mã Javascript để lưu văn bản vào tệp

script.js

let textEle = document.getElementById["text"];
let fileNameEle = document.getElementById["fileName"];
let saveBtn = document.getElementById["saveBtn"];

saveBtn.addEventListener["click", [e] => {
  e.preventDefault[];

  const textData = textEle.value;
  const textDataBlob = new Blob[[textEle.value], { type: "text/plain" }];

  const downloadUrl = window.URL.createObjectURL[textDataBlob]

  const downloadLink = document.createElement['a'];
  downloadLink.download = fileNameEle.value
  downloadLink.href = downloadUrl;
  downloadLink.click[]

  console.log[textData];
  console.log[textDataBlob];
}];

Trong đoạn mã javascript ở trên, chúng ta có một trình lắng nghe sự kiện nhấp vào nút lưu. Bên trong đó, chúng tôi đã viết logic để lưu văn bản vào một tệp và tải xuống tệp

Bên trong trình lắng nghe sự kiện saveBtn, trước tiên chúng tôi lấy dữ liệu văn bản và tên tệp do người dùng nhập vào. Sau đó, chúng tôi đang xây dựng đốm màu bằng cách sử dụng. Hàm tạo Blob[] được sử dụng để tạo blob từ các đối tượng khác như JSON, văn bản, v.v. Bạn có thể tìm hiểu thêm ở trên blob tại đây

Sau khi tạo Blob, chúng tôi đã tạo URL tệp bằng URL. phương thức tĩnh createObjectUrl[]. Sau đó, tạo phần tử neo bằng phương thức `createElement[]` và thêm URL tệp mới tạo vào thuộc tính href. Cuối cùng, chúng tôi đang gọi phương thức `click[]` trên phần tử neo để bắt đầu tải xuống tệp

Ngoài ra kiểm tra

• Phát âm thanh khi nhấp vào nút bằng Javascript
• Thanh trượt hình ảnh tự động trong HTML và Javascript

Kho lưu trữ GitHub

Phần kết luận

Trong hướng dẫn này, chúng ta đã học cách lưu vùng văn bản/giá trị đầu vào vào tệp văn bản bằng javascript. Hy vọng nó hữu ích. Cảm ơn

Làm cách nào để lưu dữ liệu từ vùng văn bản trong HTML?

Textarea có thuộc tính giá trị không?

Textarea có thể có giá trị mặc định không?

Textarea có thể được nhập vào không?