Hi,
Following is the code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Text Area Test</title>
<style type="text/css">
@import "dojo-all/dojo/resources/dojo.css";
@import "dojo-all/dijit/themes/tundra/tundra.css";
@import "dojo-all/dojox/grid/_grid/tundraGrid.css";
</style>
<script type="text/javascript" src="dojo-all/dojo/dojo.js" djconfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript" src="js/requires.js"></script>
<script type="text/javascript">
function limitText(limitField, limitNum) {
console.debug(limitField.value.length);
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
}
</script>
</head>
<body class="tundra">
<textarea id='ta1' dojoType="dijit.form.Textarea" onKeyDown="limitText(this,5);" onKeyUp="limitText(this,5);">
Text goes here..
</textarea>
<textarea id='ta2' onKeyDown="limitText(this,5);" onKeyUp="limitText(this,5);">
Text goes here..
</textarea>
</body>
The limitText method is invoked from 'ta2' but from "dijit.form.Textarea" 'ta1' this method is not invoked. Can anyone point me whether the issue in my code or issue in dojo.
Thanks, Thiru

The issue is in the way that Form Dijits work
There are several points you need to consider.
At the root of it is the fact that the textarea you declare is not the one that is actually used - for any dijit Dojo generates new markup with its own event handlers which it inserts in the DOM document in place of your declaration. It passes your initial value to the newly defined node, and in certain circumstances connects event handlers you define to the new node, to run after (or instead of, in some cases) its own handlers. Unfortunately, it looks like that the Textarea dijit does not connect the key and mouse events, rather intercepting them for its own purposes (presumably to use in its resizing code). However form dijits, including dijit.form.Textarea do provide a generic onChange event, and if you set the intermediateChanges attribute to true, it fires for each keypress (default is false, so that onChange only fires when the Textarea loses focus).
The second major point is that for form dijits, the value should not accessed directly - even if you attach your current limitText call to the onChange event, it will not work as you want. You need to use the dijit's getValue() and setValue() methods.
So one way to get your example working is to add a new function:
function limitTextDijit(limitField, limitNum) { console.debug(limitField.getValue().length); if (limitField.getValue().length > limitNum) { limitField.setValue(limitField.getValue().substring(0, limitNum)); }and change your dijit declaration to:
Text goes here..
</textarea>
This does have one possibly undesirable side effect - the onChange fires during page load when your initial value is transferred to the new node, and the initial text is truncated immediately. There are probably ways around this, if it is important, such as only connecting to onChange once the dijit is already created (I think doing it in a dojo.addOnLoad function would probably work).
Some other things to be aware of - because of the way dijit.form.Textarea is implemented the displayed value, and the actual value retrieved by getValue() (and submitted to the server if a form is submitted) are not necessarily the same - the actual value will have leading and trailing whitespace trimmed and intermediate whitespace consolidated (multiple spaces consolidated to a single space). This has a side effect that typing spaces at the end of a line does not cause the onChange to fire, nor do additional spaces after the first if added in the beginning or the middle of the line. Also a setValue call always moves the cursor to the end of the input, which could have some undesirable effects in your example, if the user thinks he is inserting somewhere in the middle.
Depending on what you want to achieve, you may find one of the TextBox implementations more appropriate.
Hey, Thanks a lot for your
Hey, Thanks a lot for your suggestion..
Not what is needed, though.
I am having the same problem and, although the onchange event works, it only works when the focus leaves the text area. The idea is that with each keypress, the textbox content length is assessed and then something is done -- usually the length is shown in an adjacent textbox or label and when the max is reached, no more characters can be entered. I looked at the possibility of using dojo.connect to hook it up, but one needs to pass parameters to the function to be hooked up and it would not let me do this. I did not get an error when I did not pass parameters, but it did not work either I have spent hours on this and cannot find any information on how to do this rather common task!
Please help!
I tried this for the connect and it did not work:
dojo.addOnLoad(function(){var txtarea = dojo.byId("descTxt"); dojo.connect(txtarea,"keyDown",textCounter) } )
Use intermediateChanges="true" with onChange
The dojo onChange (n.b. not onchange) event on a dijit.form.Textarea does fire for (almost) every keypress if the attribute intermediateChanges="true" is set on the textarea declaration (it defaults to false). However, as noted above the implementation of dijit.form.Textarea is designed to consolidate consecutive whitespace in the submitted value to a single space, and so the onChange event does not fire for whitespace added at the end of the input, or for consecutive whitespace added in the middle of the text. Depending on what you want to achieve, this may not be acceptable. If I remember correctly, the intermediateChanges attribute also works on dijit.form.TextBox and its derived dijits, so if the multi-line capability of a Textarea is not needed, you might find that more useful.