Es5 Getting Started in EJ2 JavaScript TextArea Control
25 Mar 20248 minutes to read
This section explains how to create a simple TextArea Control and configure its available functionalities, using Essential JS 2 quickstart seed repository.
Dependencies
The following list of dependencies are required to use the TextArea Control in your application.
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-base
Installation and configuration
- Clone the Essential JS 2 quickstart application project from GitHub and install necessary npm packages using the following command.
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install
By default, the project is configured with all the Essential JS 2 dependencies. For better understanding, remove all the dependencies from
src/system.config.js
to get started with the TextArea Control.
- Refer to the TextArea component dependencies in
system.config.js
configuration file.
[src/system.config.js]
System.config({
paths: {
'syncfusion:': './node_modules/@syncfusion/',
},
map: {
app: 'app',
//Syncfusion packages mapping
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
},
packages: {
'app': { main: 'app', defaultExtension: 'js' }
}
});
System.import('app');
- The TextArea CSS files are available in the
ej2-inputs
package folder. This can be referenced in your application using the following code.
[src/styles/styles.css]
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components.
This web tool is useful to combine the required component scripts and styles in a single file.
Adding TextArea to the application
Add the HTML Textarea tag with the id
attribute as default
to your index.html
file.
[src/index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 TextArea</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!--style reference from app-->
<link href="/styles/styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>
</head>
<body>
<div>
<!--Element to render the TextArea control-->
<textarea id="default"></textarea>
</div>
<script>
// initialize TextArea control
var textareaObj = new ej.inputs.TextArea();
textareaObj.appendTo('#default');
</script>
</body>
</html>
- Now, run the application in the browser using the following command.
npm start
The following example shows a basic TextArea control.
// Initialize the TextArea control.
var textareaObj = new ej.inputs.TextArea();
// Render initialized TextArea.
textareaObj.appendTo('#default');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 TextArea</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 TextArea Components">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="wrap">
<textarea id="default"></textarea>
</div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
box-sizing: border-box;
margin: 0 auto;
padding: 30px 10px;
width: 260px;
}
Getting and setting values
To set the initial value of the TextArea Control, you can utilize the value property. Here’s how you can achieve it:
// initializes the TextArea Control
var textareaObj = new ej.inputs.TextArea({
// set value to the TextArea
value: 'Comments'
});
// Append the component to the target element
textareaObj.appendTo('#default');
- You can also set the value by enclosing the desired text within the opening and closing tags of the textarea element.
<!--initializes the TextArea Control-->
<textarea id="default">Comments</textarea>
- Alternatively, you can set the value to the textarea element by assigning text to the
value
property using the textarea instance.
// initializes the TextArea Control
var textareaObj = new ej.inputs.TextArea();
textareaObj.appendTo('#default');
// Set value to the TextArea Control
textareaObj.value = 'comments';
- You can dynamically retrieve the value of the TextArea Control using the
value
property from the TextArea component instance.
[src/index.html]
<!--initializes the TextArea Control-->
<div>
<textarea id="default"></textarea>
<button id="valuebtn">Get Value</button>
</div>
[src/index.js]
// initializes the TextArea Control
let textareaObj: TextArea = new TextArea();
textareaObj.appendTo('#default');
// gets value from TextArea Control instance
document.getElementById('valuebtn').onclick = function () {
let textareaValue = textareaObj.value;
}
- You can retrieve the value of the TextArea by accessing it as an argument from the change event.
// initializes the TextArea Control
let textareaObj: TextArea = new TextArea({
change: (args: ChangedEventArgs )=> {
// Get the value of the TextArea from the arguments
console.log(args.value);
}
});
textareaObj.appendTo('#default');
// Set value to the TextArea Control
textareaObj.value = 'comments';