The Textarea Object in HTML DOM is used to represent the HTML <textarea> Element. The textarea element can be accessed by using getElementById() method.
Syntax:
document.getElementById("ID"); Where ID is assigned to the <textarea> element.
Property Values:
- autofocus: It is used to set or return whether the element should get focus when the page loads.
- cols: It is used to set or return the value of this cols attribute of a textarea Element.
- defaultvalue: It is used to set or return the defaultvalue of the textarea element.
- disabled: It is used to set or return the value of the disabled attribute of the textarea element.
- form: It is used to return the reference of the form that contains the textarea field.
- maxLength: It is used to set or return the value of the maxattribute of a textarea field.
- name: It is used to set or return the name attribute of a textarea field.
- placeholder: It is used to set or return the value of the placeholder attribute of a textarea field.
- readOnly: It is used to return the value of the readonly attribute of a textarea field.
- required: It is used to set or return whether the input element must be filled before submitting the form.
- type: rows: It is used to set or return the value of the type attribute of a textareafield
- value: It is used to set or return the content of a textarea field.
- wrap: It is used to return the value of the wrap attribute of a textarea field.
Methods:
- select(): It is used to select all the entire contents present in the textarea field.
Example 1: This example describes the getElementById() method to access the <textare> element.
html
<!DOCTYPE html> <html>
<head>
<title>
HTML DOM Textarea Object
</title>
</head>
<body style = "text-align:center">
<h1 style = "color: green;">
GeeksforGeeks
</h1>
<h2>DOM Textarea Object</h2>
<!--A disabled textarea-->
<textarea id = "myGeeks">
GeeksForGeeks.A computer science portal for Geeks.
</textarea>
<br>
<button onclick = "Geeks()">
Submit
</button>
<p id = "sudo"></p>
<script>
function Geeks() {
var x = document.getElementById("myGeeks").value;
document.getElementById("sudo").innerHTML = x;
}
</script>
</body>
</html>
|
Output:
Before Click on the Button:
After Click on the Button:
Example 2: Textarea Object can be created by using the document.createElement method.
html
<!DOCTYPE html> <html>
<head>
<title>
HTML DOM Textarea Object
</title>
</head>
<body style = "text-align:center">
<h1 style = "color: green;">
GeeksforGeeks
</h1>
<h2>DOM Textarea Object</h2>
<button onclick = "Geeks()">
Submit
</button>
<!-- script to create textarea -->
<script>
function Geeks() {
// textarea tag is created
var g = document.createElement("TEXTAREA");
var f = document.createTextNode(
"GeeksForGeeks.A computer science portal for Geeks.");
g.appendChild(f);
document.body.appendChild(g);
}
</script>
</body>
</html>
|
Output:
Before Click on the Button:
After Click on the Button:
Supported Browsers: The browser supported by DOM Textarea Object are listed below:
- Google Chrome
- Edge 12 and above
- Internet Explorer
- Firefox
- Opera
- Safari