docs • api • ui• typedinput

- Editor
- APIs
- RED.actions
- RED.events
- RED.notify
- RED.sidebar
- Widgets
- AutoComplete
- EditableList
- SearchBox
- TreeList
- TypedInput
- Themes
- Theme Plugins

TypedInput Widget

一个替代常规 <input> 的组件，允许选择值的类型，包括字符串、数字和布尔类型的选项。

选项
方法
事件
类型
示例
类型值的运行时处理

选项

default

类型: 字符串

如果定义，设置输入的默认类型，如果 typeField 未设置。

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

types

类型: 数组

设置元素提供的类型列表。

选项的值是字符串标识符的数组，用于预定义类型和 TypeDefinition 对象，用于任何自定义类型。

预定义的类型包括：

标识符	描述
`msg`	一个 `msg.` 属性表达式
`flow`	一个 `flow.` 属性表达式
`global`	一个 `global.` 属性表达式
`str`	一个字符串
`num`	一个数字
`bool`	一个布尔值
`json`	一个有效的 JSON 字符串
`bin`	一个 Node.js 缓冲区
`re`	一个正则表达式
`jsonata`	一个 Jsonata 表达式
`date`	当前时间戳
`env`	一个环境变量
`node`	一个 `node.` 属性表达式
`cred`	一个安全凭据

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

typeField

类型: CSS 选择器

在某些情况下，希望已有一个 <input> 元素来存储 typedInput 的类型值。此选项允许提供这样的现有元素。随着 typedInput 类型的改变，提供的输入的值也会改变。

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

在 Node-RED 节点中使用时，可以通过在节点的 defaults 对象中添加一个条目来将此值作为节点属性存储。这确保类型与节点配置中的值一起保存。

<div class="form-row">
    <label>示例:</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"
        });
    }
})

方法

disable( state )

自 Node-RED 1.2.7 起

禁用当前启用的 typedInput。

可选的 state 参数可用于切换 typedInput 的禁用/启用状态。如果 state 为 true，则元素将被禁用，否则将启用。

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

disabled()

自 Node-RED 1.2.7 起

返回: 布尔值

获取当前 typedInput 是否被禁用。

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

enable()

自 Node-RED 1.3.3 起

启用当前禁用的 typedInput。

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

hide()

在当前可见时隐藏 typedInput。

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

show()

在当前隐藏时显示 typedInput。

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

type()

返回: 字符串

获取选定的 typedInput 类型。

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

type( type )

设置选定的 typedInput 类型。

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

types( types )

设置 typedInput 提供的类型列表。请参见 types 选项的描述。

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

validate()

返回: 布尔值

触发对 typedInput 的类型/值的重新验证。每当类型或值变化时都会自动发生，但此方法允许手动运行。

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

value()

返回: 字符串

获取 typedInput 的值。

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

value( value )

设置 typedInput 的值。

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

width( width )

设置 typedInput 的宽度。

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

事件

change( event, type, value )

当输入的类型或值发生更改时触发。

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

注意: value 属性是在 Node-RED 1.3 中添加的

类型

TypeDefinition

一个 TypeDefinition 对象描述了可以由 typedInput 元素提供的类型。

它是一个具有以下属性的对象：

属性	类型	必需	描述
`value`	字符串	是	类型的标识符
`label`	字符串		显示在类型菜单中的标签
`icon`	字符串		在类型菜单中显示的图标。可以是图像 URL，或者是 FontAwesome 4 图标，例如 `"fa fa-list"`。
`options`	数组		如果该类型具有固定的值集合，则这是一个字符串选项的数组。例如，布尔类型的 `["true","false"]`。
`multiple`	布尔值		如果设置了 `options`，则可以启用对它们的多重选择。
`hasValue`	布尔值		如果该类型没有值，则设置为 `false`。
`validate`	函数		用于验证该类型值的函数。
`valueLabel`	函数		生成给定值的标签的函数。该函数接受两个参数：`container` - 标签应构建的 DOM 元素，以及 `value`。
`autoComplete`	函数		自 2.1.0 起. 如果设置，则在输入上启用自动补全，使用此函数获取补全建议。有关详细信息，请参见 autoComplete。此选项不能与 `options`、`hasValue=false` 或 `valueLabel` 一起使用。

示例

内置字符串、数字、布尔类型

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

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

消息属性

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

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

流/全局上下文属性

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

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

从选项列表中选择

<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"},
    ]
}]})

从选项列表中选择多个项目

<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"},
    ]
}]})

类型值的运行时处理

由于 typedInput 增强常规 HTML <input> 的方式，其值作为字符串存储。例如，布尔值存储为 "true" 和 "false"。

当作为节点属性存储时，节点的运行时部分需要解析字符串以获取类型值。

提供了一个工具函数来处理 TypedInput 提供的内置类型。

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

属性	类型	必需	描述
`value`	字符串	是	要评估的属性
`type`	字符串	是	属性的类型
`node`	节点	是，针对某些类型	评估属性的节点
`msg`	消息对象	是，针对某些类型	用于评估的消息对象
`callback`	回调	是，对于 `flow`/`global` 类型	接收结果的回调

对于大多数类型，可以在不提供回调的情况下同步使用该函数。

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

对于 msg 类型，还应提供消息对象：

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

要处理 flow 和 global 上下文类型，需要提供节点以及由于上下文访问的异步性质而需要的回调函数：

RED.util.evaluateNodeProperty(value, type, node, msg, (err, result) => {
    if (err) {
        // 访问上下文时出错
    } else {
        // 对 'result' 做某些操作
    }
})