Login Register

Textarea

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>

Accessibility

Keyboard

ActionKeyComments
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.EscIf 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.

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:

.dijitTextarea{
        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

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?