Multiline in EJ2 JavaScript Textbox control

15 May 202322 minutes to read

This feature allows the textbox to accept one or more lines of text like address, description, comments, and more.

Create multiline textbox

You can convert the default textbox into the multiline textbox by setting the multiline API value as true or pass HTML5 textarea as element to the textbox.

The multiline textbox allows you to resize it in vertical direction alone.

index.js
index.html
styles.css
// Initialize TextBox component
var textareaObject = new ej.inputs.TextBox({
    placeholder: 'Enter your address',
    value: 'Mr. Dodsworth Dodsworth, System Analyst, Studio 103'
});

// Render initialized TextBox
textareaObject.appendTo('#default');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Multiline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 TextBox Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/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" class="multiline">
        <textarea id="default" name="text"></textarea>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
.multiline{
    margin: 30px auto;
    width: 30%;
}
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue','calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }

Implementing floating label

You can achieve the floating label behavior in the multiline textbox by setting floatLabelType as ‘Auto’. The placeholder text act as floating label to the multiline textbox. You can provide the placeholder text to the multiline textbox either by using the placeholder property or placeholder attribute.

index.js
index.html
styles.css
// Initialize TextBox component with floating type as auto
var floatTypeAuto = new ej.inputs.TextBox({
    placeholder: 'Enter your address',
    floatLabelType: 'Auto'
});
// Render initialized floating type as auto TextBox
floatTypeAuto.appendTo('#multiline-auto');

// Initialize TextBox component with floating type as always
var floatTypeAlways = new ej.inputs.TextBox({
    placeholder: 'Enter your address',
    floatLabelType: 'Always'
});
// Render initialized floating type as always TextBox
floatTypeAlways.appendTo('#multiline-always');

// Initialize TextBox component with floating type as never
var floatTypeNever = new ej.inputs.TextBox({
    placeholder: 'Enter your address',
    floatLabelType: 'Never'
});
// Render initialized floating type as never TextBox
floatTypeNever.appendTo('#multiline-never');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Multiline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 TextBox Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <label class="custom-input-label"> Float label type auto </label>
    <div id="container" class="multiline">
        <textarea id="multiline-auto" name="typeAuto"></textarea>
    </div>
    <label class="custom-input-label"> Float label type always </label>
    <div id="container1" class="multiline">
        <textarea id="multiline-always" name="typeAlways"></textarea>
    </div>
    <label class="custom-input-label"> Float label type never </label>
    <div id="container2" class="multiline">
        <textarea id="multiline-never" name="typeNever"></textarea>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
.multiline{
    margin: 10px auto;
    width: 30%;
}
.custom-input-label {
    font-size: 14px;
    font-weight: bold;
    margin: 35%;
}
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue','calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }

Auto resizing

By default, you can manually resize the multiline textbox. But you can also create an auto resizing multiline textbox with both the initial and dynamic value change. It can be done by calculating the height of the textarea in the created event for initial value update and in the input event for dynamic value update of the auto resize multiline textbox, as explained in the following code sample.

index.js
index.html
styles.css
// Initialize TextBox component
var autoResize = new ej.inputs.TextBox({
    placeholder: 'Enter your address',
    floatLabelType: 'Auto',
    value: "Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center",
    created: function () {
        this.addAttributes({rows: "1"});
        this.element.style.height = "auto";
        this.element.style.height = (this.element.scrollHeight-7) +"px";
    },
    input: function () {
        this.element.style.height = "auto";
        this.element.style.height = (this.element.scrollHeight)+"px";
    }
});

// Render initialized TextBox
autoResize.appendTo('#default');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Multiline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 TextBox Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/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" class="multiline">
        <textarea id="default" name="text"></textarea>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
.multiline{
    margin: 30px auto;
    width: 30%;
}
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue','calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }

Disable resizing

By default, the multiline textbox is rendered with resizable. You can disable the resize of the multiline textbox by applying the following CSS styles.

    textarea.e-input,
    .e-float-input textarea,
    .e-float-input.e-control-wrapper textarea,
    .e-input-group textarea,
    .e-input-group.e-control-wrapper textarea {
        resize: none;
    }

index.js
index.html
styles.css
// Initialize TextBox component
var disableResize = new ej.inputs.TextBox({
    placeholder: 'Enter your address',
    floatLabelType: 'Auto'
});

// Render initialized TextBox
disableResize.appendTo('#default');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Multiline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 TextBox Component">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
	<link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/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" class="multiline">
        <textarea id="default" name="text"></textarea>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
.multiline{
    margin: 30px auto;
    width: 30%;
}
textarea.e-input,
.e-float-input textarea,
.e-float-input.e-control-wrapper textarea,
.e-input-group textarea,
.e-input-group.e-control-wrapper textarea {
    resize: none;
}
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue','calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }

Limit the text length

By default, the text length of the multiline textbox is unlimited. You can limit the text length by setting the maxLength attribute using the addAttributes method.

index.js
index.html
styles.css
// Initialize TextBox component
var maxLength = new ej.inputs.TextBox({
    placeholder: 'Enter your address',
    floatLabelType: 'Auto'
});

// Render initialized TextBox
maxLength.appendTo('#default');

// Initialize TextBox component
var addAttr = new ej.inputs.TextBox({
    placeholder: 'Enter your address',
    floatLabelType: 'Auto'
});

// Render initialized TextBox
addAttr.appendTo('#attr');

// Initialize Button component
var button = new ej.buttons.Button({
});

// Render initialized Button
button.appendTo('#button');

document.getElementById('button').onclick = function () {
    addAttr.addAttributes({maxlength: 15});
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Multiline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 TextBox Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <label class="custom-input-label"> Add max length attribute through inline </label>
    <div id="container" class="multiline">
        <textarea id="default" maxlength="15" name="text"></textarea>
    </div>
    <label class="custom-input-label"> Add maxlength attribute through addAttributes method</label>
    <div id="sample" class="multiline">
        <textarea id="attr" name="length"></textarea>
    </div>
    <button id="button">Add max length</button>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
.multiline{
    margin-top: 10px;
    margin-left: 170px;
    width: 30%;
}
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue','calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }
  button{
    margin-left: 170px;
  }
  .custom-input-label {
    font-size: 14px;
    font-weight: bold;
    margin: 170px;
}

Count characters

You can show the number of characters entered inside the textarea by calculating the character count in the input event of multiline textbox. The character count is updated while entering or deleting any character inside the textarea. The character count shows how many characters can be entered or left to be entered.

index.js
index.html
styles.css
// Initialize TextBox component
var countChar = new ej.inputs.TextBox({
    placeholder: 'Enter your address',
    floatLabelType: 'Auto',
    input: function () {
        var word, addresscountRem, addressCount;
        word = this.element.value;
        addressCount = word.length;
        addresscountRem = document.getElementById('numbercount');
        addresscountRem.textContent = addressCount+"/25";
    }
});

// Render initialized TextBox
countChar.appendTo('#default');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Multiline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 TextBox Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/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" class="multiline">
        <textarea id="default" maxlength="25" name="text"></textarea>
        <div id="numbercount"></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>
.multiline{
    margin: 30px auto;
    width: 30%;
}
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue','calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }

#numbercount{
    margin-left: 170px;
  }