Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New page for reflection properties of HTMLTextAreaElement #35664

Merged
merged 3 commits into from
Sep 11, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions files/en-us/web/api/htmltextareaelement/autocomplete/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
title: "HTMLTextAreaElement: autocomplete property"
short-title: autocomplete
slug: Web/API/HTMLTextAreaElement/autocomplete
page-type: web-api-instance-property
browser-compat: api.HTMLTextAreaElement.autocomplete
---

{{ APIRef("HTML DOM") }}

The **`autocomplete`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface indicates whether the value of the control can be automatically completed by the browser. It reflects the `<textarea>` element's [`autocomplete`](/en-US/docs/Web/HTML/Element/textarea#autocomplete) attribute.

## Value

A string that is `"on"`, `"off"`, or the empty string `""` if unspecified.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

## Examples

```js
const textareaElement = document.getElementById("comment");
console.log(textArea.autocomplete);
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("textarea")}}
36 changes: 36 additions & 0 deletions files/en-us/web/api/htmltextareaelement/cols/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: "HTMLTextAreaElement: cols property"
short-title: cols
slug: Web/API/HTMLTextAreaElement/cols
page-type: web-api-instance-property
browser-compat: api.HTMLTextAreaElement.cols
---

{{ APIRef("HTML DOM") }}

The **`cols`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface is a positive integer representing the visible width of the text control, in average character widths. It reflects the `<textarea>` element's [`cols`](/en-US/docs/Web/HTML/Element/textarea#cols) attribute.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

## Value

A positive integer. Defaults to 20.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

## Examples

```js
const textareaElement = document.getElementById("comment");
textArea.cols = 80;
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("textarea")}}
- {{DOMXref("HTMLTextAreaElement.rows")}}
- {{DOMXref("HTMLTextAreaElement.wrap")}}
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved
38 changes: 38 additions & 0 deletions files/en-us/web/api/htmltextareaelement/defaultvalue/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
---
title: "HTMLTextAreaElement: defaultValue property"
short-title: defaultValue
slug: Web/API/HTMLTextAreaElement/defaultValue
page-type: web-api-instance-property
browser-compat: api.HTMLTextAreaElement.defaultValue
---

{{ APIRef("HTML DOM") }}

The **`defaultValue`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface represents the default text content of this text area. Getting and setting this value is equivalent to getting and setting its {{domxref("Node.textContent", "textContent")}}.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

## Value

A string.

## Examples

In the example below, even when the text area has been modified by the user, the `defaultValue` still returns the value originally written in the HTML. If `defaultValue` is set, any user input is overwritten.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

```js
const textareaElement = document.getElementById("comment");
console.log(textArea.defaultValue);
textArea.defaultValue = "This is now the default text";
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("textarea")}}
- {{DOMXref("HTMLTextAreaElement.value")}}
37 changes: 37 additions & 0 deletions files/en-us/web/api/htmltextareaelement/disabled/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
title: "HTMLTextAreaElement: disabled property"
short-title: disabled
slug: Web/API/HTMLTextAreaElement/disabled
page-type: web-api-instance-property
browser-compat: api.HTMLTextAreaElement.disabled
---

{{ APIRef("HTML DOM") }}

The **`disabled`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface indicates whether this text area is disabled and cannot be interacted with. It reflects the `<textarea>` element's [`disabled`](/en-US/docs/Web/HTML/Element/textarea#autocomplete) attribute. When `false`, this `textarea` may still be disabled if its containing element, such as a {{htmlelement("fieldset")}}, is disabled.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

## Value

A boolean.

## Examples

```js
const textareaElement = document.getElementById("comment");
if (commentsDisabled) {
textareaElement.disabled = true;
}
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("textarea")}}
- {{DOMXref("HTMLTextAreaElement.readOnly")}}
35 changes: 35 additions & 0 deletions files/en-us/web/api/htmltextareaelement/placeholder/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
title: "HTMLTextAreaElement: placeholder property"
short-title: placeholder
slug: Web/API/HTMLTextAreaElement/placeholder
page-type: web-api-instance-property
browser-compat: api.HTMLTextAreaElement.placeholder
---

{{ APIRef("HTML DOM") }}

The **`placeholder`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface represents a hint to the user of what can be entered in the control. It reflects the `<textarea>` element's [`placeholder`](/en-US/docs/Web/HTML/Element/textarea#placeholder) attribute.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

## Value

A string.

## Examples

```js
const textareaElement = document.getElementById("comment");
console.log(textArea.placeholder);
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("textarea")}}
- {{DOMXref("HTMLTextAreaElement.value")}}
35 changes: 35 additions & 0 deletions files/en-us/web/api/htmltextareaelement/readonly/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
title: "HTMLTextAreaElement: readOnly property"
short-title: readOnly
slug: Web/API/HTMLTextAreaElement/readOnly
page-type: web-api-instance-property
browser-compat: api.HTMLTextAreaElement.readOnly
---

{{ APIRef("HTML DOM") }}

The **`readOnly`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface indicates that the user cannot modify the value of the control. Unlike the {{domxref("HTMLTextAreaElement.disabled", "disabled")}} attribute, the `readonly` attribute does not prevent the user from clicking or selecting in the control. It reflects the `<textarea>` element's [`readonly`](/en-US/docs/Web/HTML/Element/textarea#readonly) attribute.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

## Value

A boolean.

## Examples

```js
const textareaElement = document.getElementById("comment");
console.log(textArea.readOnly);
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("textarea")}}
- {{DOMXref("HTMLTextAreaElement.disabled")}}
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved
35 changes: 35 additions & 0 deletions files/en-us/web/api/htmltextareaelement/required/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
title: "HTMLTextAreaElement: required property"
short-title: required
slug: Web/API/HTMLTextAreaElement/required
page-type: web-api-instance-property
browser-compat: api.HTMLTextAreaElement.required
---

{{ APIRef("HTML DOM") }}

The **`required`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface specifies that the user must fill in a value before submitting a form. It reflects the `<textarea>` element's [`required`](/en-US/docs/Web/HTML/Element/textarea#required) attribute.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

## Value

A boolean.

## Examples

```js
const textareaElement = document.getElementById("comment");
console.log(textArea.required);
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("textarea")}}
- {{DOMXref("HTMLTextAreaElement.validity")}}
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved
36 changes: 36 additions & 0 deletions files/en-us/web/api/htmltextareaelement/rows/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: "HTMLTextAreaElement: rows property"
short-title: rows
slug: Web/API/HTMLTextAreaElement/rows
page-type: web-api-instance-property
browser-compat: api.HTMLTextAreaElement.rows
---

{{ APIRef("HTML DOM") }}

The **`rows`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface is a positive integer representing the visible text lines of the text control. It reflects the `<textarea>` element's [`rows`](/en-US/docs/Web/HTML/Element/textarea#rows) attribute.

## Value

A positive integer. Defaults to 2.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

## Examples

```js
const textareaElement = document.getElementById("comment");
textArea.rows = 20;
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("textarea")}}
- {{DOMXref("HTMLTextAreaElement.cols")}}
- {{DOMXref("HTMLTextAreaElement.wrap")}}
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved
36 changes: 36 additions & 0 deletions files/en-us/web/api/htmltextareaelement/textlength/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: "HTMLTextAreaElement: textLength property"
short-title: textLength
slug: Web/API/HTMLTextAreaElement/textLength
page-type: web-api-instance-property
browser-compat: api.HTMLTextAreaElement.textLength
---

{{ APIRef("HTML DOM") }}

The **`textLength`** read-only property of the {{DOMxRef("HTMLTextAreaElement")}} interface is a non-negative integer representing the number of characters, in UTF-16 code units, of its value. It is a shortcut of accessing {{jsxref("String/length", "length")}} on its {{domxref("HTMLTextAreaElement/value", "value")}} property.
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved

## Value

A non-negative integer.

## Examples

```js
const textareaElement = document.getElementById("comment");
console.log(textArea.textLength);
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("textarea")}}
- {{DOMXref("HTMLTextAreaElement.rows")}}
- {{DOMXref("HTMLTextAreaElement.cols")}}
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved
36 changes: 36 additions & 0 deletions files/en-us/web/api/htmltextareaelement/wrap/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: "HTMLTextAreaElement: wrap property"
short-title: wrap
slug: Web/API/HTMLTextAreaElement/wrap
page-type: web-api-instance-property
browser-compat: api.HTMLTextAreaElement.wrap
---

{{ APIRef("HTML DOM") }}

The **`wrap`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface indicates how the control should wrap the value for form submission. It reflects the `<textarea>` element's [`wrap`](/en-US/docs/Web/HTML/Element/textarea#wrap) attribute. Note that the `"hard"` value only has an effect when the {{domxref("HTMLTextAreaElement.cols", "cols")}} attribute is also set.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The **`wrap`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface indicates how the control should wrap the value for form submission. It reflects the `<textarea>` element's [`wrap`](/en-US/docs/Web/HTML/Element/textarea#wrap) attribute. Note that the `"hard"` value only has an effect when the {{domxref("HTMLTextAreaElement.cols", "cols")}} attribute is also set.
The **`wrap`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface indicates how a multi-line value of the form control should wrap for form submission. It reflects the `<textarea>` element's [`wrap`](/en-US/docs/Web/HTML/Element/textarea#wrap) attribute.
See [`wrap`](/en-US/docs/Web/HTML/Element/textarea#wrap) for the possible values. Defaults to `"soft"`. Note that the `"hard"` value only has an effect when the {{domxref("HTMLTextAreaElement.cols", "cols")}} attribute is also set.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would mention the "values" below in its own section.


## Value

See [`wrap`](/en-US/docs/Web/HTML/Element/textarea#wrap) for the possible values. Defaults to `"soft"`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
See [`wrap`](/en-US/docs/Web/HTML/Element/textarea#wrap) for the possible values. Defaults to `"soft"`.
The value of the `wrap` property, if set. Otherwise, the empty string.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"The wrap property has the value of the wrap property" is a tautology. I assume you mean "it reflects the value of the wrap attribute" but that's already mentioned above.


## Examples

```js
const textareaElement = document.getElementById("comment");
const oldWrap = textArea.wrap;
textArea.wrap = "hard"; // wrap the text at the specified width
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("textarea")}}
- {{DOMXref("HTMLTextAreaElement.cols")}}