HTMLTextAreaElement

Thuộc tính thể hiện

Cũng kế thừa các thuộc tính từ giao diện cha, HTMLElement.

autocomplete

Một chuỗi đại diện cho thuộc tính autocomplete của phần tử.

cols

Một số đại diện cho thuộc tính cols của phần tử, cho biết chiều rộng hiển thị của vùng văn bản.

defaultValue

Một chuỗi đại diện cho giá trị mặc định của điều khiển, hoạt động giống như thuộc tính Node.textContent.

dirName

Một chuỗi đại diện cho hướng văn bản của phần tử.

disabled

Một giá trị logic đại diện cho thuộc tính disabled của phần tử, cho biết điều khiển không khả dụng để tương tác.

form Read only

Trả về tham chiếu đến phần tử biểu mẫu cha. Nếu phần tử này không nằm trong phần tử biểu mẫu, nó có thể là thuộc tính id của bất kỳ phần tử <form> nào trong cùng tài liệu hoặc giá trị null.

labels Read only

Trả về một NodeList gồm các phần tử <label> được liên kết với phần tử này.

maxLength

Một số đại diện cho thuộc tính maxlength của phần tử, cho biết số ký tự tối đa người dùng có thể nhập. Ràng buộc này chỉ được đánh giá khi giá trị thay đổi.

minLength

Một số đại diện cho thuộc tính minlength của phần tử, cho biết số ký tự tối thiểu người dùng có thể nhập. Ràng buộc này chỉ được đánh giá khi giá trị thay đổi.

name

Một chuỗi đại diện cho thuộc tính name của phần tử, chứa tên của điều khiển.

placeholder

Một chuỗi đại diện cho thuộc tính placeholder của phần tử, chứa gợi ý cho người dùng về nội dung cần nhập vào điều khiển.

readOnly

Một giá trị logic đại diện cho thuộc tính readonly của phần tử, cho biết người dùng không thể sửa đổi giá trị của điều khiển.

required

Một giá trị logic đại diện cho thuộc tính required của phần tử, cho biết người dùng phải chỉ định một giá trị trước khi gửi biểu mẫu.

rows

Một số đại diện cho thuộc tính rows của phần tử, cho biết số dòng văn bản hiển thị của điều khiển.

selectionDirection

Một chuỗi đại diện cho hướng mà việc chọn đã diễn ra. Giá trị là forward nếu việc chọn được thực hiện theo hướng từ đầu đến cuối của ngôn ngữ hiện tại, hoặc backward cho hướng ngược lại. Giá trị này cũng có thể là none nếu hướng không xác định.

selectionEnd

Một số đại diện cho chỉ mục cuối của văn bản được chọn. Nếu không có văn bản nào được chọn, nó chứa chỉ mục của ký tự ngay sau con trỏ nhập.

selectionStart

Một số đại diện cho chỉ mục bắt đầu của văn bản được chọn. Nếu không có văn bản nào được chọn, nó chứa chỉ mục của ký tự ngay sau con trỏ nhập.

textLength Read only

Trả về độ dài theo code point của value của điều khiển. Tương đương với việc đọc value.length.

type Read only

Trả về chuỗi textarea.

validationMessage Read only

Trả về một thông báo đã được bản địa hóa mô tả các ràng buộc xác thực mà điều khiển không thỏa mãn, nếu có. Đây là chuỗi rỗng nếu điều khiển không phải là ứng viên cho xác thực ràng buộc (willValidate là false), hoặc nếu nó thỏa mãn các ràng buộc của mình.

validity Read only

Trả về trạng thái hợp lệ hiện tại của phần tử này.

value

Một chuỗi đại diện cho giá trị thô chứa trong điều khiển.

willValidate Read only

Trả về việc phần tử có phải là ứng viên cho xác thực ràng buộc hay không. Giá trị là false nếu bất kỳ điều kiện nào ngăn nó bị xác thực ràng buộc, bao gồm khi thuộc tính readOnly hoặc disabled là true.

wrap

Một chuỗi đại diện cho thuộc tính wrap của phần tử, cho biết cách điều khiển ngắt dòng văn bản.

Phương thức thể hiện

Cũng kế thừa các phương thức từ giao diện cha, HTMLElement.

checkValidity()

Trả về false nếu phần tử là ứng viên cho xác thực ràng buộc và không thỏa mãn các ràng buộc của nó. Trong trường hợp này, nó cũng kích hoạt sự kiện invalid có thể hủy tại điều khiển. Trả về true nếu điều khiển không phải là ứng viên cho xác thực ràng buộc, hoặc nếu nó thỏa mãn các ràng buộc của mình.

reportValidity()

Phương thức này báo cáo các vấn đề về ràng buộc trên phần tử, nếu có, cho người dùng. Nếu có vấn đề, nó kích hoạt sự kiện invalid có thể hủy tại phần tử và trả về false; nếu không có vấn đề nào, nó trả về true.

select()

Chọn toàn bộ nội dung của điều khiển.

setCustomValidity()

Đặt một thông báo hợp lệ tùy chỉnh cho phần tử. Nếu thông báo này không phải là chuỗi rỗng, phần tử đang gặp lỗi hợp lệ tùy chỉnh và không hợp lệ.

setRangeText()

Thay thế một phạm vi văn bản trong phần tử bằng văn bản mới.

setSelectionRange()

Chọn một phạm vi văn bản trong phần tử (nhưng không tập trung vào nó).

Sự kiện

Cũng kế thừa các sự kiện từ giao diện cha, HTMLElement.

Lắng nghe các sự kiện này bằng addEventListener() hoặc bằng cách gán trình xử lý sự kiện cho thuộc tính oneventname của giao diện này:

select event

Kích hoạt khi một phần văn bản đã được chọn.

selectionchange event

Kích hoạt khi vùng chọn văn bản trong phần tử <textarea> thay đổi.

Ví dụ

Ví dụ textarea tự tăng chiều cao

Tăng chiều cao của textarea tự động khi đang nhập:

JavaScript

function autoGrow(field) {
  if (field.scrollHeight > field.clientHeight) {
    field.style.height = `${field.scrollHeight}px`;
  }
}

document.querySelector("textarea").addEventListener("keyup", (e) => {
  autoGrow(e.target);
});

CSS

textarea.no-scrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}

HTML

<form>
  <fieldset>
    <legend>Your comments</legend>
    <p><textarea class="no-scrollbars"></textarea></p>
    <p><input type="submit" value="Send" /></p>
  </fieldset>
</form>

Ví dụ chèn thẻ HTML

Chèn một số thẻ HTML vào textarea:

function insert(startTag, endTag) {
  const textArea = document.myForm.myTextArea;
  const start = textArea.selectionStart;
  const end = textArea.selectionEnd;
  const oldText = textArea.value;

  const prefix = oldText.substring(0, start);
  const inserted = startTag + oldText.substring(start, end) + endTag;
  const suffix = oldText.substring(end);

  textArea.value = `${prefix}${inserted}${suffix}`;

  const newStart = start + startTag.length;
  const newEnd = end + startTag.length;

  textArea.setSelectionRange(newStart, newEnd);
  textArea.focus();
}

function insertURL() {
  const newURL = prompt("Enter the full URL for the link");
  if (newURL) {
    insert(`<a href="${newURL}">`, "</a>");
  } else {
    document.myForm.myTextArea.focus();
  }
}

const strong = document.querySelector("#format-strong");
const em = document.querySelector("#format-em");
const link = document.querySelector("#format-link");
const code = document.querySelector("#format-code");

strong.addEventListener("click", (e) => insert("<strong>", "</strong>"));
em.addEventListener("click", (e) => insert("<em>", "</em>"));
link.addEventListener("click", (e) => insertURL());
code.addEventListener("click", (e) => insert("<code>", "</code>"));

Trang trí span để hoạt động như một liên kết:

.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

<form name="myForm">
  <p>
    [
    <span class="intLink" id="format-strong"><strong>Bold</strong></span> |
    <span class="intLink" id="format-em"><em>Italic</em></span> |
    <span class="intLink" id="format-link">URL</span> |
    <span class="intLink" id="format-code">code</span> ]
  </p>

  <p>
    <textarea name="myTextArea" rows="10" cols="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros.
    </textarea>
  </p>
</form>

Đặc tả kỹ thuật

Tương thích trình duyệt