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
`re`	a Regular Expression
`date`	the current timestamp

$(".input").typedInput({
    types: ["msg","str"]
});

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
}