JavaScript/jQuery TextArea - Getting Started
jQuery
Angular
Vue
React
The TextArea component allows users to enter and edit multi-line text.
This tutorial shows how to add a TextArea component to a page and configure the component's core settings. As a result, you will create the following UI component:
Each section in this tutorial describes a single configuration step. You can find the full code in the following GitHub repository: getting-started-with-text-area.
Create a TextArea
jQuery
Add DevExtreme to your jQuery application and use the following code to create a TextArea component:
$(function() {
$("#text-area").dxTextArea({ });
});
<html>
<head>
<!-- ... -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.1.8/css/dx.light.css">
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.1.8/js/dx.all.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="text-area"></div>
</body>
</html>Angular
Add DevExtreme to your Angular application and use the following code to create a TextArea component:
<dx-text-area></dx-text-area>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxTextAreaModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxTextAreaModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
Add DevExtreme to your Vue application and use the following code to create a TextArea component:
<template>
<DxTextArea>
</DxTextArea>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTextArea } from 'devextreme-vue/text-area';
export default {
components: {
DxTextArea
}
}
</script>React
Add DevExtreme to your React application and use the following code to create a TextArea component:
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { TextArea } from 'devextreme-react/text-area';
function App() {
return (
<TextArea>
</TextArea>
);
}
export default App;Specify Value and Label
To set an initial TextArea value, use the value property. You can also specify the maxLength property to limit the number of characters users can enter. Note that this property only limits the number of characters for users. Your code can specify text that exceeds the maximum character length, but the number of characters displayed to users will still be limited by this property setting.
Use the placeholder property to give users a hint about what they should type in the TextArea. You can also use the label property for this purpose. To change the label appearance, set the labelMode property to one of the following values:
"static"
The component displays the label above the input field."floating"
The component uses the label as a placeholder, but when the editor gets focus, the label moves to the position above the input field."hidden"
The label is hidden.
jQuery
$(function() {
$("#text-area").dxTextArea({
value: longText,
maxLength: 500,
label: "Country"
});
});
const longText = "Japan is a sovereign island nation in East Asia. Located in the Pacific Ocean, it lies off the eastern coast of the Asian mainland and stretches from the Sea of Okhotsk in the north to the East China Sea and China in the southwest. The Greater Tokyo Area is the most populous metropolitan area in the world.";Angular
<dx-text-area
[value]="longText"
[maxLength]="500"
label="Country"
>
</dx-text-area>
// ...
export class AppComponent {
longText = "Japan is a sovereign island nation in East Asia. Located in the Pacific Ocean, it lies off the eastern coast of the Asian mainland and stretches from the Sea of Okhotsk in the north to the East China Sea and China in the southwest. The Greater Tokyo Area is the most populous metropolitan area in the world.";
}Vue
<template>
<DxTextArea
:value="longText"
:max-length="500"
label="Country"
/>
</template>
<script>
// ...
export default {
components: {
DxTextArea
},
data() {
return {
longText: "Japan is a sovereign island nation in East Asia. Located in the Pacific Ocean, it lies off the eastern coast of the Asian mainland and stretches from the Sea of Okhotsk in the north to the East China Sea and China in the southwest. The Greater Tokyo Area is the most populous metropolitan area in the world."
};
}
}
</script>React
// ...
const longText = "Japan is a sovereign island nation in East Asia. Located in the Pacific Ocean, it lies off the eastern coast of the Asian mainland and stretches from the Sea of Okhotsk in the north to the East China Sea and China in the southwest. The Greater Tokyo Area is the most populous metropolitan area in the world.";
function App() {
return (
<TextArea
value={longText}
maxLength={500}
label="Country"
/>
);
}
export default App;Resize TextArea
If the size of the UI component should be fixed, specify the width and height properties.
The UI component's height can also adapt to UI component contents. In this case, set the autoResizeEnabled property to true. To specify the minimum and maximum height for the adaptive TextArea, use the minHeight and maxHeight properties.
jQuery
$(function() {
$("#text-area").dxTextArea({
// ...
minHeight: 50,
maxHeight: 300,
autoResizeEnabled: true
});
});Angular
<dx-text-area ...
[minHeight]="50"
[maxHeight]="300"
[autoResizeEnabled]="true"
>
</dx-text-area>Vue
<template>
<DxTextArea ...
:min-height="50"
:max-height="300"
:auto-resize-enabled="true"
/>
</template>
<script>
// ...
</script>React
// ...
function App() {
return (
<TextArea ...
minHeight={50}
maxHeight={300}
autoResizeEnabled={true}
/>
);
}
export default App;Handle Value Change
If a user edits the text in a TextArea, the UI component updates the value property. The update happens on the change event. To specify another value change event, use the valueChangeEvent property.
To handle the value change event, implement the onValueChanged function.
jQuery
$(function() {
$("#text-area").dxTextArea({
// ...
valueChangeEvent: "keyup",
onValueChanged() {
DevExpress.ui.notify("The value has been changed");
}
});
});Angular
<dx-text-area ...
valueChangeEvent="keyup"
(onValueChanged)="onValueChanged()"
>
</dx-text-area>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';
// ...
export class AppComponent {
onValueChanged() {
notify("The value has been changed");
}
}Vue
<template>
<DxTextArea ...
value-change-event="keyup"
@value-changed="onValueChanged"
/>
</template>
<script>
// ...
import notify from "devextreme/ui/notify";
export default {
components: {
DxTextArea
},
data() {
// ...
},
methods: {
onValueChanged() {
notify("The value has been changed");
}
}
}
</script>React
import React, { useCallback } from "react";
import "devextreme/dist/css/dx.light.css";
import { TextArea } from 'devextreme-react/text-area';
import notify from "devextreme/ui/notify";
// ...
function App() {
const onValueChanged = useCallback(() => {
notify("The value has been changed");
}, []);
return (
<TextArea ...
valueChangeEvent="keyup"
onValueChanged={onValueChanged}
/>
);
}
export default App;