- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
Textarea
Submitted by haysmark on Tue, 05/29/2007 - 00:02.
A Textarea widget is like a regular HTML textarea, but it dynamically resizes to fit the content of the text inside. It takes nearly all the parameters (name, value, etc.) that a vanilla textarea takes. Cols is not supported and the width should be specified with style width. Rows is not supported since this widget adjusts the height. It is especially useful in an InlineEditBox. Note that when declaring a Textarea in markup you should use a <textarea> node to preserve the newline formatting.
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Textarea Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Textarea");
</script>
</head>
<body class="tundra">
<textarea dojoType="dijit.form.Textarea" style="width:300px">
Click at the end of this paragraph and start typing.
You will be amazed!
</textarea>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Textarea Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Textarea");
</script>
</head>
<body class="tundra">
<textarea dojoType="dijit.form.Textarea" style="width:300px">
Click at the end of this paragraph and start typing.
You will be amazed!
</textarea>
</body>
</html>
Accessibility
Keyboard
| Action | Key | Comments |
|---|---|---|
| Move focus to the next widget in the tab order. | Tab | |
| Move focus to the prior widget in the tab order. | Shift+Tab | |
| Enter a newline into the text. | Enter | |
| Revert the last entry. | Esc | If the user has not entered data, the Esc key is ignored. |
Known Issues
- Ticket 3902: When the Text Area widget is first opened the caret is at the start; it should be at the end.
- On Firefox 2, the user must press the Tab key twice before keyboard focus moves to the next widget. (There is no problem when using Shift+Tab.) This is a permanent restriction on Firefox 2.
- Printer-friendly version
- Login or register to post comments
- Subscribe post
addition request
I really like the auto-expanding feature of this, but it would be nice to be able to specify the initial row count. I find that users know they're going to need to enter a lot of information and are hesitant when they see the one-line text box (and some complain before they even try it.)
reset?
Since this is commonly used as a form element we will need a way to reset it. Is it save to just set innerHTML on the div to an empty string?
As with all form widgets...
... you can just call dijit.byId("mytextarea").setValue("");
Textarea sizing
A sort-of solution to handle the sizes of the textarea is to override some style settings. This works for me:
min-height:5.5em !important;
max-height:22em !important;
overflow-y: auto !important;
}
It gives me three initial lines and it will expand up to 12 lines (with the inherited line height of 1.5 em)
how to specify maxlength for a textarea ?
This Works
dojoType="dijit.form.TextBox" maxLength="25"
This Does Not.
dojoType="dijit.form.Textarea" trim="true" propercase="true" maxLength="25"
How can you specify maxlength for a textarea ?
athem, you talk about the
athem, you talk about the max length of the input string? The normal HTML textarea does not support that either, you have to do your own validation there. But why use textarea with a 25 char limit?
http://www.w3schools.com/htmldom/dom_obj_textarea.asp
no really, how do you set maxLength for dijit.form.Textarea
The question is how do you limit the length of the input string of a dijit.form.Textarea, not a W3C HTML textarea.
If you like, say it's a 255 char limit instead of 25.
Now how do you do it?
Since a dijit.form.Textarea can be built from either a HTML input or textarea it should support this. Even if it could only be built from a HTML textarea, I don't see any reason why dijit.form.Textarea shouldn't do this. It's kind of the point of using Dijit to do things you can't with just HTML.
The SimpleTextarea does have a maxLength property (for the input's maxlength attribute), but it doesn't use it like it should and I don't see why this shouldn't be moved up to Textarea and then enforced for both.
You can use the validation
You can use the validation functions maybe?
I just think that you should not automatically demand a certain functionality of a widget that does not exist in the standard object it will replace. And regardless what html object (textarea, textbox or div) you convert to a dijit.form.textArea, it is replacement for textarea you are making.
just looking for examples in the Dojo way to support maxLength
>I just think that you should not automatically demand a certain functionality of a widget that does not exist in the standard object it will replace.
I am not "automatically demanding" it. I am asking how to do it. Any examples in the Dojo way are appreciated.
I personally don't care if maxLength is provided (and enforced) in dijit.form.Textarea or some subclass. This is pretty common need though and should be provide by some standard dijit. If the Dojo design philosophy was to strictly limit dijits to their HTML counterparts, then dijit.form.Textarea shouldn't provide autosizing and many other dijits would need to have functionality removed. For that matter, why is there a maxLength attribute in SImpleTextarea but not Textarea? And what is it used for?
Well when you use words like
Well when you use words like "should support" and "should provide" I read it as bit more than a feature request. But we should not go too deep into that here, the forum is a better place for longer discussions. But as an answer to your question: "why is there a maxLength attribute in SImpleTextarea but not Textarea?" I say that the reason might very well be that the SimpleTextarea is a later design. Because, as you said, maxlength IS a good thing. Maybe you can have a look at the SimpleTextarea and see if you can find the maxlength stuff in there and use it to extend your Textarea?
I do however think that the Textarea widget would need a bit more work, but this is a open source project were people like you and me can not only consume, we can also produce and contribute. Many people are giving up their free time for making Dojo for us and it feels to me that, although we should not just "be happy with anything we get", we should not be quick to ventilate our unhappiness about what we still have not got.
Shortlived amazement
The control is amazing, but
-IE7 can't display this page at all (29 Jan 2008, IE 7.0.5730.11)
-In FF, the focus() method does not work
-The control does not support the readonly attribute
-In IE, the box that displays text for a single line is tall enough for two lines, while in FF it is only one line tall
This list is not exhaustive. Your efforts to make this control behave will be.
HTML formatted content in textarea
Hello
Is there some way to use setValue() on a TextArea to add text with HTML tags to format it?
If no, how I can change the innerHTML of it?
Thanks
Font control?
I'm a bit stuck trying to define any font styles for this text area widget. I love how it works, but it would be nice if I could make it use the same font as the TextBoxes on my form. Also a bit of padding inside the text box would be nice too. I've added 2px padding to the other TextBoxes, but again I cannot do this with the TextArea. Any input would be most helpful, thank you!
problem with copy and paste into textarea
In the demo above, if I blank the field and then copy something that is longer than the field into the textarea, all that shows up is a horizontal scrollbar until I click somewhere else in the page. I am using Firefox 2.0. For example, copy
urn:ogf:network:domain=some.network:node=bnl-mr1:port=TenGigabitEthernet1/1
I want to use a textarea where most of the input will not be that long, but will likely be copied and pasted, and not have to have the longest possible textarea for input to be immediately visible.
opera support
Great tool!!! But it doesn't work in Opera. Will there be some Opera support in the near future?
Can this be modified to also
Can this be modified to also cover the new SimpleTextArea in 1.1?
that's a problem~`
Hi~~~
it looks different in FF and IE 7..
IE:two rows;
FF:one row;
why?
that's a problem~`
Hi~~~
it looks different in FF and IE 7..
IE:two rows;
FF:one row;
why?
How to disable the automatic conversion process of textarea?
When putting in a source code, it is changed into an address etc. and I am troubled.
In this case, what kind of attribute should be put in?
this data (It will be processed as a mail address.):
Problem with onFocus etc
When creating a textbox (or any dijit.form.*) programmatically, it is quite difficult to trace for example an onFocus event back to the control it came from, because:
1)the event handlers registered on creation can only be bare fn() pointers, it is not possible to attach any arguments
2)When the handler is actually invoked, there is no event object argument or whatever.
It would be very convenient, and probably easy to implement, if these handlers would at least get a reference to the calling object passed from the framework ('dijit/_Widget.js'?).
The only way I can think of to trace back the calling object as it is now would be to
first) create the textbox object
then) attach a handler using theBox.setAttribute("yourEvent", "handler(yourArg)");
Problem when pasting copied text in Safari
I am building a tagging system (apart from the cms) on a cms and have discovered a problem that seem to originate from dijit.form.Textarea and dijit.form.SimpleTextarea.
UTF-8 charactersets
Tested on
Mac: Safari 3, FF 3
Windows: IE 6
Problem only occurs with Safari
Problem:
Users can input tags like on Flickr, separated by a space bar, or enclosed with double quotes. I deal with their string of tags on the server side, parse it and update my tag tables accordingly. php is parsing on space bar and double quotes.
However, if I enter the string of tags
bicycle summer France holiday
and post it everything is fine. But if I move a word with cut and paste in Safari,
summer France holiday bicycle
Safari will add an invisible character making sure there is a space between 'holiday' and 'bicycle'. This character is causing php to not see the white space anymore and that has an effect on the rest of logics in the backend.
Before I came to the conclusion that dijit.form.Textarea was part of the problem (which still might be something else I am doing wrong of course), I checked the posted string with php function
ctype_print and it returns false if I use dijit.form.Textarea - removing dijit.form.Textarea, ctype_print is happy.
But the dijit.form.Textarea is extremely useful for tagfields as it will add a line when you reach the end of the line.
Can you advise on this?
utf8decoding the posted strings shows a question mark between 'holiday' and 'bicycle': holiday?bicycle - so one would say characterset problem.
Then the question remains why dijit.form.Textarea and regular textarea are behaving differently?
Thanks for any help - not urgent as my users can do with the regular textarea for now.