Posted By
Bajarangi soft ,
Posted On 02-10-2020
Textarea Object
The Textarea object represents an HTML <textarea> element.
Access a Textarea Object
You can access a <textarea> element by using getElementById():
Example(1)
Address:<br>
<textarea id="myTextarea">
342 Alvin Road
XYZ</textarea>
<button class="btn btn-success" type="button" onclick="myFunction()">Try it</button>
<h2 id="demo"></h2>
<script>
function myFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
</script>
In above example when you click button you can get textarea data.
Complete code for HTML DOM Textarea Object With Java Script
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Textarea Object With Java Script</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h1{
color:red;
}
textarea{
margin-left: 100px;
}
</style>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1>HTML DOM Textarea Object With Java Script</h1>
</div>
<br>
<div class="well">
Address:<br>
<textarea id="myTextarea" rows="5" cols="20">342 Alvin Road XYZ</textarea>
<button class="btn btn-info" type="button" onclick="extract()">Get Address</button>
<h2 id="demo1"></h2>
<button class="btn btn-info" onclick="create_texarea()">Create it</button>
</div>
<div>
</body>
</html>
<script>
function extract() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo1").innerHTML = x;
}
function create_texarea() {
var x = document.createElement("TEXTAREA");
var t = document.createTextNode("Visit Our BajaRangiSoft To Learn More About JAVASCRIPT");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
Textarea Object Properties
| Property | Description |
|---|---|
| autofocus | Sets or returns whether a text area should automatically get focus when the page loads |
| cols | Sets or returns the value of the cols attribute of a text area |
| defaultValue | Sets or returns the default value of a text area |
| disabled | Sets or returns whether the text area is disabled, or not |
| form | Returns a reference to the form that contains the text area |
| maxLength | Sets or returns the value of the maxlength attribute of a text area |
| name | Sets or returns the value of the name attribute of a text area |
| placeholder | Sets or returns the value of the placeholder attribute of a text area |
| readOnly | Sets or returns whether the contents of a text area is read-only |
| required | Sets or returns whether the text area must be filled out before submitting a form |
| rows | Sets or returns the value of the rows attribute of a text area |
| type | Returns the type of the form element the text area is |
| value | Sets or returns the contents of a text area |
| wrap | Sets or returns the value of the wrap attribute of a text area |
Textarea Object Methods
| Method | Description |
|---|---|
| select() | Selects the entire contents of a text area |