TypedInput Widget

A replacement for a regular <input> that allows the type of the value to be chosen, including options for string, number and boolean types.

Since: 0.14

Options

default

Type: String

If defined, sets the default type of the input if typeField is not set.

$(".input").typedInput({
    default: "msg"
});

types

Type: Array

Sets the list of types the element will offer.

The value of the option is an array of string-identifiers for the predefined types and TypeDefinition objects for any custom types.

The predefined types are:

identifier description
msg a msg. property expression
flow a flow. property expression
global a global. property expression
str a String
num a Number
bool a Boolean
json a valid JSON string
bin a Node.js Buffer
re a Regular Expression
date the current timestamp
$(".input").typedInput({
    types: ["msg","str"]
});

typeField

Type: CSS Selector

In some circumstances it is desirable to already have an <input> element to store the type value of the typedInput. This option allows such an existing element to be provided. As the type of the typedInput is changed, the value of the provided input will also change.

$(".input").typedInput({
    typeField: ".my-type-field"
});

Methods

type()

Returns: String

Gets the selected type of the typedInput.

var type = $(".input").typedInput('type');

type( type )

Sets the selected type of the typedInput.

$(".input").typedInput('type','msg');

types( types )

Sets the list of types offered by the typedInput. See the description of the types option.

$(".input").typedInput('types',['str','num']);

validate()

Returns: Boolean

Triggers a revalidation of the typedInput’s type/value. This occurs automatically whenever the type or value change, but this method allows it to be run manually.

var isValid = $(".input").typedInput('validate');

value()

Returns: String

Gets the value of the typedInput.

var value = $(".input").typedInput('value');

value( value )

Sets the value of the typedInput.

$(".input").typedInput('value','payload');

width( width )

Sets the width of the typedInput. This must be used in place of the standard jQuery.width() function as it ensures the component resizes properly.

$(".input").typedInput('width', '200px');

Events

change( type, value )

Triggered when either the type or value of the input is changed.

$(".input").on('change', function(type, value) {} );

Types

TypeDefinition

A TypeDefinition object describes a type that can be offered by a typedInput element.

It is an object with the following properties:

Property Type Required Description
value string yes The identifier for the type
label string   A label to display in the type menu
icon string   An icon to display in the type menu
options array   If the type has a fixed set of values, this is an array of string options for the value. For example, ["true","false"] for the boolean type.
hasValue boolean   Set to false if there is no value associated with the type.
validate function   A function to validate the value for the type.
Examples

Number type:

{
    value:"num",
    label:"number",
    icon:"red/images/typedInput/09.png",
    validate:/^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/
}

Boolean type:

{
    value:"bool",
    label:"boolean",
    icon:"red/images/typedInput/bool.png",
    options:["true","false"]
}

Timestamp type:

{
    value:"date",
    label:"timestamp",
    hasValue:false
}