Text Area
Documentation
The TextArea is a widget that enables a user to enter and edit a multi-line text.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
window.onload = function() {
var valueChangeEvents = [{
title: "On Blur",
name: "change"
}, {
title: "On Key Up",
name: "keyup"
}];
var maxLength = ko.observable(null),
value = ko.observable(longText),
eventValue = ko.observable(valueChangeEvents[0].name),
valueForEditableTextArea = ko.observable(longText);
var viewModel = {
textAreaWithMaxLength: {
maxLength: maxLength,
value: value,
height: 90
},
checkBoxOptions: {
value: false,
onValueChanged: function(data) {
if (data.value) {
value(longText.substring(0, 100));
maxLength(100);
} else {
value(longText);
maxLength(null);
}
},
text: "Limit text length"
},
selectBoxOptions: {
items: valueChangeEvents,
value: eventValue,
valueExpr: "name",
displayExpr: "title"
},
editableTextArea: {
value: valueForEditableTextArea,
height: 90,
valueChangeEvent: eventValue
},
disabledTextArea: {
value: valueForEditableTextArea,
height: 90,
readOnly: true
}
};
ko.applyBindings(viewModel, document.getElementById("text-area-demo"));
};
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/19.1.5/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="text-area-demo">
<div class="dx-fieldset">
<div class="dx-fieldset-header">Default Mode</div>
<div class="dx-field">
<div data-bind="dxCheckBox: checkBoxOptions"></div>
</div>
</div>
<div class="left-content">
<div data-bind="dxTextArea: textAreaWithMaxLength"></div>
</div>
<div class="full-width-content">
<div class="dx-fieldset">
<div class="dx-fieldset-header">Event Handling and API</div>
<div class="dx-field">
<div class="dx-field-label">Synchronize text areas </div>
<div class="dx-field-value">
<div data-bind="dxSelectBox: selectBoxOptions"></div>
</div>
</div>
</div>
<div data-bind="dxTextArea: editableTextArea"></div>
<div data-bind="dxTextArea: disabledTextArea"></div>
</div>
</div>
</div>
</body>
</html>
.full-width-content {
width: 100%;
margin-top: 30px;
}
.full-width-content > .dx-widget {
margin-bottom: 20px;
}
.full-width-content .dx-field {
max-width: 385px;
}
var longText = "Prepare 2013 Marketing Plan: We need to double revenues in 2013 and our marketing strategy is going to be key here. R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers.Robert, please make certain to create a PowerPoint presentation for the members of the executive team.";