window.onload = function () {
const valueChangeEvents = [{
title: 'On Blur',
name: 'change',
}, {
title: 'On Key Up',
name: 'keyup',
}];
const maxLength = ko.observable(null);
const value = ko.observable(longText);
const eventValue = ko.observable(valueChangeEvents[0].name);
const valueForEditableTextArea = ko.observable(longText);
const viewModel = {
textAreaWithMaxLength: {
maxLength,
value,
height: 90,
},
checkBoxOptions: {
value: false,
onValueChanged(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.5.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/22.2.3/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.3/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;
}
const 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.';