TextArea Overview
The TextArea converts a <textarea> element into a styled textarea.
The TextArea is part of Kendo UI for jQuery, a
professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basic Usage
The TextArea provides a set of default API configuration options that can be set during its initialization such as value, placeholder, and so on.
The following example demonstrates how to create a TextArea and set some of its configuration options.
<textarea id="description" style="width: 100%;"></textarea>
<script>
$(document).ready(function(){
$("#description").kendoTextArea({
value: "A library of 70+ UI widgets, an abundance of data-visualization gadgets, client-side data source, and a built-in MVVM (Model-View-ViewModel) library",
placeholder: "Description...",
rows:5
});
});
</script>
Initializing the TextArea
During initialization, the TextArea wraps the <textarea> element with a <span> tag.
The following example demonstrates how to initialize the TextArea.
<textarea id="description" style="width: 100%;"></textarea>
<script>
$(document).ready(function(){
$("#description").kendoTextArea();
});
</script>
Events
The TextArea supports the change event. The change fires each time a new value is set by the user.
Important: The
changeevent is not fired when the value of the widget is changed from JavaScript code.
To handle the TextArea events, you can specify the JavaScript function which will handle the event during the initialization of the widget or use the bind method of the widget after its initialization.
The following example demonstrates how to subscribe to the change event during initialization.
<textarea id="description" style="width: 100%;"></textarea>
<script>
$("#description").kendoTextArea({
change: function(e) {
var value = this.value();
console.log(value);
}
});
</script>
Here is a demo on using some of the TextArea events.
Referencing Existing Instances
To reference to an existing TextArea instance, use the jQuery.data() method. Once a reference is established, use the API to control its behavior.
The following example demonstrates how to access an existing TextArea instance.
<script>
var tb = $("#description").data("kendoTextArea");
</script>