Skip to Content | Skip to Navigation


dijit.form.TextBox

Status:Draft
Version:1.3
Authors:Becky Gibson, Doug Hays, Bill Keese, Nikolai Onken, Marcus Reimann, Craig Riecke
Developers:Doug Hays, Bill Keese
Available:since V1.0

TextBox is a basic <input type=”text”>-style form control. It has rudimentary text-scrubbing functions that trim or proper-casify text, but it does not validate the entered text. Like all Dijit controls, TextBox inherits the design theme, so it’s better to use this than an HTML control, even if you don’t have to do any input scrubbing. However:

Examples

Declarative example

Sizing TextBoxes

Sizing a text box is done through the CSS width on the text box dom node. Typically this is done by specifying the width in ems. Please see the following for an example:

Getting and Manipulating the Value

Getting and manipulating the value is a trivial matter. It is done through the attr() function of the widget. Please see the following example for more detail:

Accessibility

Keyboard

The TextBox widget uses native HTML INPUT (type=text) controls.



  • Demo
  • Copy&Paste
  • JavaScript
  • HTML
 
Copy to clipboard

To run the demo in your own environment, copy and paste the full source into an editor and open it in a browser.

Copy to clipboard
<script type="text/javascript">
    dojo.require("dijit.form.TextBox");
</script>
Copy to clipboard
<input type="text" name="firstname" value="testing testing" dojoType="dijit.form.TextBox"
trim="true" id="firstname" propercase="true">
<label for="firstname">
    Auto-trimming, Proper-casing Textbox:
</label>
  • Demo
  • Copy&Paste
  • JavaScript
  • HTML
  • CSS
 
Copy to clipboard

To run the demo in your own environment, copy and paste the full source into an editor and open it in a browser.

Copy to clipboard
<script>
    dojo.require("dijit.form.TextBox");

    function init() {
        var box = dijit.byId("progBox");
        dojo.style(box.domNode, "width", "5em");
    }
    dojo.addOnLoad(init);
</script>
Copy to clipboard
<b>
    A default textbox:
</b>
<div dojoType="dijit.form.TextBox">
</div>
<br>
<b>
    A large textbox:
</b>
<div style="width: 50em;" dojoType="dijit.form.TextBox">
</div>
<br>
<b>
    A small textbox:
</b>
<div style="width: 10em;" dojoType="dijit.form.TextBox">
</div>
<br>
<b>
    A programmatically sized textbox:
</b>
<div id="progBox" dojoType="dijit.form.TextBox">
</div>
<br>
Copy to clipboard
<style type="text/css">
</style>
  • Demo
  • Copy&Paste
  • JavaScript
  • HTML
  • CSS
 
Copy to clipboard

To run the demo in your own environment, copy and paste the full source into an editor and open it in a browser.

Copy to clipboard
<script>
    dojo.require("dijit.form.TextBox");

    function init() {
        var box0 = dijit.byId("value0Box");
        var box1 = dijit.byId("value1Box");
        box1.attr("value", box0.attr("value") + " modified");
        dojo.connect(box0, "onChange", function() {
            box1.attr("value", box0.attr("value") + " modified");
        });
    }
    dojo.addOnLoad(init);
</script>
Copy to clipboard
<b>
    A textbox with a value:
</b>
<input id="value0Box" dojoType="dijit.form.TextBox" value="Some value"
intermediateChanges="true">
</input>
<br>
<b>
    A textbox set with a value from the above textbox:
</b>
<input id="value1Box" dojoType="dijit.form.TextBox">
</input>
<br>
Copy to clipboard
<style type="text/css">
</style>