$(function(){
var exampleTextArea = $("#example-textarea").dxTextArea({
value: longText,
height: 90
}).dxTextArea("instance");
$("#set-max-length").dxCheckBox({
value: false,
onValueChanged: function(data) {
if (data.value) {
exampleTextArea.option("value", (exampleTextArea.option("value")).substring(0, 100));
exampleTextArea.option("maxLength", 100);
} else {
exampleTextArea.option("maxLength", null);
exampleTextArea.option("value", longText);
}
},
text: "Limit text length"
});
var valueChangeEvents = [{
title: "On Blur",
name: "change"
}, {
title: "On Key Up",
name: "keyup"
}];
$("#change-event").dxSelectBox({
items: valueChangeEvents,
value: valueChangeEvents[0].name,
valueExpr: "name",
displayExpr: "title",
onValueChanged: function(data) {
editingTextArea.option("valueChangeEvent", data.value);
}
});
var editingTextArea = $("#editing-textarea").dxTextArea({
value: longText,
height: 90,
valueChangeEvent: "change",
onValueChanged: function(data) {
disabledTextArea.option("value", data.value);
}
}).dxTextArea("instance");
var disabledTextArea = $("#disabled-textarea").dxTextArea({
value: longText,
height: 90,
readOnly: true
}).dxTextArea("instance");
});
<!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>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/19.2.4/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 class="dx-fieldset">
<div class="dx-fieldset-header">Default Mode</div>
<div class="dx-field">
<div id="set-max-length"></div>
</div>
</div>
<div class="left-content">
<div id="example-textarea"></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 id="change-event"></div>
</div>
</div>
</div>
<div id="editing-textarea"></div>
<div id="disabled-textarea"></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.";