A data-* attribute on a <textarea> tag attaches additional data to the textarea.
To create a custom attribute, replace * with a lowercase string, such as data-id, data-status, or data-location.
A custom data-name attribute on a <textarea>.
The attribute value is not visible, but is readable by JavaScript.
<textarea data-name="Rembrandt van Rijn" rows="6" cols="75">
Rembrandt van Rijn was a Dutch draughtsman, painter, and printmaker.
An innovative and prolific master in three media, he is generally
considered one of the greatest visual artists in the history of
art and the most important in Dutch art history.
</textarea>
The data-* attribute adds custom information to a <textarea> element.
The * part is replaced with a lowercase string, such as data-id, data-cost, or data-location.
An <textarea> element can have any number of data-* attributes, each with their own name.
Using data-* attributes reduces the need for requests to the server.
Note: The data-* attribute is not visible and does not change the appearance of the textarea.
<textarea data-*="value">
Note: The * can be any string, such as data-id, data-cost, data-supplier, etc.
| Value | Description |
|---|---|
| value | A string value. Can be numeric, alphanumeric, JSON, etc. |
A custom data-subject attribute on a <textarea>.
Clicking the button will display the subject value.
<textarea id="mytextarea" data-subject="Rembrandt van Rijn" rows="6" cols="75">
Rembrandt van Rijn was a Dutch draughtsman, painter, and printmaker.
An innovative and prolific master in three media, he is generally
considered one of the greatest visual artists in the history of
art and the most important in Dutch art history.
</textarea>
<br/><br/>
<button onclick="show();">Show data</button>
<script>
let show = () => {
let element = document.getElementById("mytextarea");
alert("Subject = " + element.getAttribute('data-subject'));
}
</script>
The <textarea> tag has a custom data-subject attribute.
The data-subject attribute stores the subject of the <textarea>.
Clicks are handled by the onclick event.
Onclick invokes a JavaScript function that extracts and displays textarea subject.
Note: Notice how the textarea purpose displays immediately without server call.
Here is when data-* support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
Back to <textarea>
