TypedInputウィジェット

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

• Options
• Methods
• Events
• Types
• Examples
• Runtime handling of typed values

オプション

default

型: String

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

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

types

型: Array

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

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

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

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

typeField

型: CSSセレクタ

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

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

When used in a Node-RED node, this value can be stored as a node property by adding an entry for it in the node’s defaults object. This ensures the type is saved along with the value in the node configuration.

<div class="form-row">
    <label>Example:</label>
    <input type="text" id="node-input-myField">
    <input type="hidden" id="node-input-myFieldType">
</div>

RED.nodes.registerType('example', {
    defaults: {
        myField: { value: "" },
        myFieldType: { value: "str" }
    },
    ...
    oneditprepare: function () {
        $("#node-input-myField").typedInput({
            typeField: "#node-input-myFieldType"
        });
    }
})

Methods

disable( state )

Since Node-RED 1.2.7

Disable the typedInput when it is currently enabled.

The optional state parameter can be used to toggle the disabled/enabled state of the typedInput. If state is true, the element will be disabled, otherwise it will be enabled.

$(".input").typedInput('disable');

disabled()

Since Node-RED 1.2.7

Returns: Boolean

Gets whether the typedInput is currently disabled or not.

$(".input").typedInput('disabled');

enable()

Since Node-RED 1.3.3

Enable the typedInput when it is currently disabled.

$(".input").typedInput('enable');

hide()

Hide the typedInput when it is currently visible.

$(".input").typedInput('hide');

show()

Show the typedInput when it is currently hidden.

$(".input").typedInput('show');

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を設定します。

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

イベント

change( event, type, value )

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

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

Note: valueプロパティはNode-RED 1.3で追加されました。

型

TypeDefinition

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

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

例

Built-in String, Number, Boolean types

<input type="text" id="node-input-example1">

$("#node-input-example1").typedInput({
    type:'str',
    types:['str','num','bool']
})

Message Properties

<input type="text" id="node-input-example2">

$("#node-input-example2").typedInput({
    type:'msg',
    types:['msg']
})

Flow/Global Context Properties

<input type="text" id="node-input-example3">

$("#node-input-example3").typedInput({
    type:'flow',
    types:['flow','global']
})

Select from a list of options

<input type="text" id="node-input-example4">

$("#node-input-example4").typedInput({type:"fruit", types:[{
    value: "fruit",
    options: [
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},
    ]
}]})

Select multiple items from a list of options

<input type="text" id="node-input-example5">

$("#node-input-example5").typedInput({type:"fruit", types:[{
    value: "fruit",
    multiple: true,
    options: [
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},
    ]
}]})

Runtime handling of typed values

Due to the way the typedInput enhances a regular HTML <input>, its value is stored as a string. For example, booleans are stored as "true" and "false".

When stored as node properties, it is necessary for the runtime part of the node to parse the string to get the typed value.

A utility function is provided to handle the built-in types provided by the TypedInput.

RED.util.evaluateNodeProperty(value, type, node, msg, callback)

For most types, the function can be used synchronously without providing a callback.

const result = RED.util.evaluateNodeProperty(value, type, node)

For msg type, the message object should also be provided:

const result = RED.util.evaluateNodeProperty(value, type, node, msg)

To handle flow and global context types, the node needs to be provided as well as a callback function due to the asynchronous nature of context access:

RED.util.evaluateNodeProperty(value, type, node, msg, (err, result) => {
    if (err) {
        // Something went wrong accessing context
    } else {
        // Do something with 'result'
    }
})