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.

index.js
index.html
styles.css
// 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/28.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/28.1.33/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';