TypedInputウィジェット

標準的な<input>を文字列型、数値型、boolean型から 選んだ型の値のフィールドに置換します。

オプション

default
types
typeField

メソッド

type
types
validate
value
width

イベント

change

TypeDefinition

オプション

default

型: String

この値が定義されている場合、 typeFieldが定義されていなければデフォルトのinputフィールドの型を設定します。

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

types

型: Array

この要素が提供する型の一覧を設定します。

このオプションの値は、 定義済みの型およびカスタムした型のTypeDefinitionオブジェクトの文字列識別子の配列です。

定義済みの型は以下のとおりです。:

識別子 説明
msg msg.プロパティ式
flow flow.プロパティ式
global global.プロパティ式
str 文字列
num 数値
bool Boolean
json 有効なJSON文字列
bin Node.js Buffer
re 正規表現
date 現在のタイムスタンプ
env 環境変数
$(".input").typedInput({
    types: ["msg","str"]
});

typeField

型: CSSセレクタ

特定の状況では、typedInputの型を保存するために<input>要素を既に持っていることが望ましいです。 このオプションでは存在している要素に型を設定しておくことができます。 typedInputの型が変更されたとき、 inputの型も変更されます。

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

メソッド

type()

戻り値: String

選択しているtypedInputの型を取得します。

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

type( type )

選択しているtypedInputの型を設定します。

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

types( types )

typedInputが提供する型の一覧を設定します。詳細はtypes optionを参照してください。

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

validate()

戻り値: Boolean

typedInputの型/値の再検証をおこなわせます。 再検証は型または値が変更されたときに自動的に実行されますが、このメソッドによって手動で実行することができます。

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

value()

戻り値: String

typedInputの値を取得します。

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

value( value )

typedInputの値を設定します。

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

width( width )

typedInputのwidthを設定します。 要素のリサイズが適切にするため、標準的なjQuery.width()の代わりにこのメソッドを利用してください。

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

イベント

change( type, value )

inputの型または値が変更されたとき、トリガーされます。

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

TypeDefinition

TypeDefinitionオブジェクトは、 typedInput要素で提供される型を記述します。

オブジェクトには以下のプロパティが設定できます。:

プロパティ 必須 説明
value string yes 型の識別子
label string   型メニューで表示されるラベル
icon string   型メニューで表示されるアイコン
options array   この型が固定値を持つ場合の値の文字列オプションの配列。例えば、boolean型の場合は["true","false"]となります。
hasValue boolean   この型に関連付けられた値がない場合、falseが設定されます。
validate function   型の値を検証するfunction

数値型:

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

Boolean型:

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

タイムスタンプ型:

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