Skip to Content | Skip to Navigation


dijit/form/TextBox

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

TextBox is a basic <input type=”text”>-style form control.

Introduction

dijit/form/TextBox 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

require(["dojo/parser", "dijit/form/TextBox"]);
<label for="firstname">Auto-trimming, Proper-casing Textbox:</label>
<input type="text" name="firstname" value="testing testing"
    data-dojo-type="dijit/form/TextBox"
    data-dojo-props="trim:true, propercase:true" id="firstname" />

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:

require(["dojo/parser", "dijit/form/TextBox"]);
<label for="dtb">A default textbox:</label> <input id="dtb" data-dojo-type="dijit/form/TextBox" />
<br>
<label for="ltb">A large textbox:</label> <input id="ltb" style="width: 50em;" data-dojo-type="dijit/form/TextBox" />
<br>
<label for="stb">A small textbox:</label> <input id="stb" style="width: 10em;" data-dojo-type="dijit/form/TextBox" />
<br>

To programmatically size a textbox you would do:

require(["dojo/ready", "dojo/parser", "dijit/registry", "dojo/dom-style", "dijit/form/TextBox"], function(ready, parser, registry, domStyle){
    ready(function(){
        var box = registry.byId("firstname");
        domStyle.set(box.domNode, "width", "5em");
    });
});
<input data-dojo-type="dijit/form/TextBox" id="firstname" />

Getting and Manipulating the Value

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

require(["dojo/ready", "dojo/parser", "dijit/registry", "dojo/on", "dijit/form/TextBox"], function(ready, parser, registry, on){
    ready(function(){
        parser.parse();
        var box0 = registry.byId("value0Box");
        var box1 = registry.byId("value1Box");
        box1.set("value", box0.get("value") + " modified");
        on(box0, "change", function(){
             box1.set("value", box0.get("value") + " modified");
        });
    });
});
<label for="value0Box">A textbox with a value:</label> <input id="value0Box" data-dojo-type="dijit/form/TextBox" value="Some value" data-dojo-props="intermediateChanges:true"></input>
<br>
<label for="value1Box">A textbox set with a value from the above textbox:</label> <input id="value1Box" data-dojo-type="dijit/form/TextBox"></input>
<br>

Using the placeholder parameter

Coming with Dojo 1.5 the HTML5 placeholder parameter (also known as a “hint”) has been implemented for all TextBox based widgets. Placeholder is gray example or hint text that the widget displays inside the input area of empty form fields, such as “John Doe” or “Your Name”. The text disappears when the user focuses the field.

In order to use it, submit a parameter “placeHolder” to your widget:

require(["dojo/ready", "dijit/form/TextBox"], function(ready, TextBox){
    ready(function(){
        var myTextBox = new dijit.form.TextBox({
            name: "firstname",
            value: "" /* no or empty value! */,
            placeHolder: "type in your name"
        }, "firstname");
    });
});
<input id="firstname" />

Accessibility

Keyboard

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