dijit/form/NumberTextBox

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

Contents

• dijit/form/NumberTextBox
  • Introduction
  • Examples
  • Accessibility

NumberTextBox widgets are used when user input is restricted to numeric input.

Introduction

By default, the widget will discover the appropriate locale and behavior as specified by Dojo. For example, when using a NumberTextBox in the United States, an optional comma is used for the thousands separator and a period for a decimal separator when displaying numbers to the user. For German users, a period is used for the thousands separator and a comma for the decimal separator. Other locales may have different conventions.

When the user edits the value, or when sending data to the server, or when retrieving the value attribute programmatically, numbers are represented simply as JavaScript numbers, formatted with a period for decimal and no thousands separators. This representation is unambiguous, so other applications may interact with this data without assuming any locale-specific behavior. When specifying the constraints attribute, you have all the options available in the Dojo constraint language.

To further restrict/validate user input, this widget makes additional numeric constraints properties (min and max) available to the developer.

Warning: if you use programmatic creation without direct value, be sure to cast your value to Number (value: Number(input.value)) otherwise you’ll get strange results (unformatted values and errors depending on locales).

Examples

Declarative example

This example defines a min and max constraint and an initial value.

require(["dojo/parser", "dijit/form/NumberTextBox"]);

require(["dojo/parser", "dijit/form/NumberTextBox"]);

<label for="q05">Integer between -20000 to +20000:</label>
<input id="q05" type="text"
    data-dojo-type="dijit/form/NumberTextBox"
    name= "elevation"
    required="true"
    value="3000"
    data-dojo-props="constraints:{min:-20000,max:20000,places:0},
    invalidMessage:'Invalid elevation.'" />

<label for="q05">Integer between -20000 to +20000:</label> <input id="q05" type="text" data-dojo-type="dijit/form/NumberTextBox" name= "elevation" required="true" value="3000" data-dojo-props="constraints:{min:-20000,max:20000,places:0}, invalidMessage:'Invalid elevation.'" />

Programmatic example

This example creates a simple NumberTextBox programmatically. The fractional part can be 0 to 6 digits long.

require(["dijit/form/NumberTextBox", "dojo/domReady!"], function(NumberTextBox){
    new NumberTextBox({
          name: "programmatic",
          constraints: {pattern: "0.######"}
    }, "programmatic");
});

require(["dijit/form/NumberTextBox", "dojo/domReady!"], function(NumberTextBox){ new NumberTextBox({ name: "programmatic", constraints: {pattern: "0.######"} }, "programmatic"); });

<label for="programmatic">Input any number with up to 6 fractional digits:</label>
<input id="programmatic" type="text" />

<label for="programmatic">Input any number with up to 6 fractional digits:</label> <input id="programmatic" type="text" />

Formatting

The constraints attribute can also contain formatting information. The example below always makes sure that the field shows three digits after the decimal point, and has a +/- sign. Try entering a simple value like “-3” and then tab away to see the effect.

require(["dojo/parser", "dijit/form/NumberTextBox"]);

require(["dojo/parser", "dijit/form/NumberTextBox"]);

<label for="zeroPadded">Fractional value:</label>
<input id="zeroPadded" type="text"
    data-dojo-type="dijit/form/NumberTextBox"
    name= "decimal"
    value="0"
    constraints="{pattern: '+0.000;-0.000'}"
    required="true" />
<button>dummy button (tab to here)</button>

<label for="zeroPadded">Fractional value:</label> <input id="zeroPadded" type="text" data-dojo-type="dijit/form/NumberTextBox" name= "decimal" value="0" constraints="{pattern: '+0.000;-0.000'}" required="true" /> <button>dummy button (tab to here)</button>

Accessibility

See the Accessibility Section in dijit.form.ValidationTextBox

Table of Contents

• dijit/form/NumberTextBox
  • Introduction
  • Examples
    • Declarative example
    • Programmatic example
    • Formatting
  • Accessibility