文档 • API • UI• TypedInput

TypedInput 小部件

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

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

选项

默认值

类型：字符串

如果定义了此项，则在未设置 typeField 的情况下，设置输入的默认类型。

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

类型

类型：数组

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

选项的值是一个字符串标识符数组，用于预定义类型和用于任何自定义类型的 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>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"
        });
    }
})

方法

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 对象描述了 typedInput 元素可以提供的一种类型。

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

属性	类型	必需	描述
`值`	字符串	是	类型的标识符
`label`	字符串		要在类型菜单中显示的标签
`icon`	字符串		要在类型菜单中显示的图标。这可以是图片 URL，也可以是 FontAwesome 4 图标，例如 `"fa fa-list"`。
`options`	数组		如果类型有一组固定的值，这是一个值的字符串选项数组。例如，布尔类型的 `["true","false"]`。
`multiple`	布尔值		如果设置了 `options`，这可以启用它们的多选。
`hasValue`	布尔值		如果与类型没有关联的值，则设置为 `false`。
`验证`	函数		一个验证类型值的函数。
`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)

属性	类型	必需	描述
`值`	字符串	是	要评估的属性
`类型`	字符串	是	属性的类型
`node`	节点	是，对于某些类型	评估属性的节点
`msg`	消息对象	是，对于某些类型	要评估的消息对象
`回调`	回调	是，对于 `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) {
        // Something went wrong accessing context
    } else {
        // Do something with 'result'
    }
})