jQuery Textarea
A textarea uses the same jQuery .val() method as a text input. For counters and live validation, the browser input event is usually better than only listening for keyup because it also catches paste and other text-entry methods.
Read Textarea Data Top ↑
const text = $( "#textarea_dtl" ).val();
<textarea id="textarea_dtl"
name="textarea_dtl"
rows="4"
class="form-control"></textarea>
<button type="button" id="b1">Copy</button>
<div id="d1"></div>
$( "#b1" ).on( "click", function () {
const text = $( "#textarea_dtl" ).val();
$( "#d1" ).text( text );
});
Bootstrap 4 Textarea Top ↑
<textarea class="form-control"
rows="4"
name="textarea_dtl"
id="textarea_dtl"></textarea>
Set Textarea Content Top ↑
$( "#b12" ).on( "click", function () {
$( "#textarea_dtl2" ).val(
"Default Data to be shown inside textarea"
);
});
Enable or Disable a Textarea Top ↑
$( "#textarea_dtl3" ).prop( "disabled", true );
$( "#textarea_dtl3" ).prop( "disabled", false );
Count the Number of Characters Top ↑
$( "#t123" ).on( "input", function () {
const length = $( this ).val().length;
$( "#d123" ).text( length );
});
The original example also enabled the submit button after 10 characters and limited the field to 50 characters:
<textarea id="t123"
name="t123"
rows="4"
maxlength="50"></textarea>
<button type="button" id="b123" disabled>
Send Data
</button>
<div id="d123">0</div>
$( "#t123" ).on( "input", function () {
const length = $( this ).val().length;
$( "#d123" ).text( length );
$( "#b123" ).prop(
"disabled",
length <= 9
);
});
Build a full textarea counter →
Additional Original Learning Routes Top ↑
These original tutorial/demo routes are retained so no useful learner path is lost:
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
