本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。
crowd-input
接受输入数据的框。
与 HTML 标准中的 input 元素不同,此元素不能通过在右方括号之前放入斜杠(例如,<crowd-input ... />)自结束。它必须后跟一个 </crowd-input> 以结束此元素。
请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen
以下是使用 <crowd-input> 元素的 Liquid 模板的示例。复制以下代码,并将其保存到具有扩展名的文件中。.html. 在任何浏览器中打开该文件,以进行预览并与该模板进行交互。
属性
此元素支持以下属性。
allowed-pattern
一个正则表达式,与 auto-validate 属性结合使用以忽略工作人员键入时的非匹配字符。
auto-focus
如果此值设置为 true,则浏览器在加载后将焦点放在输入区域内。这样,工作人员就可以直接键入,而无需先将其选中。
auto-validate
一个布尔值开关,如果存在,将开启输入验证。可以通过 error-message 和 allowed-pattern 属性修改验证器的行为。
disabled
一个布尔值开关,如果存在,将输入区域显示为已禁用。
error-message
如果验证失败,显示在输入字段下方左侧的文本。
标签
在文本字段内显示的字符串。
当工作人员开始在文本字段中键入或已设置 value 属性时,此文本会缩小并升至文本字段上方。
max-length
输入将接受的最大字符数。超出此限制的输入将被忽略。
min-length
字段中输入的最小长度
名称
设置要用于 DOM 中的输入和表单输出的名称。
占位符
一个字符串值,用作占位符文本(直至工作人员开始将数据输到输入中时才显示),它不用作默认值。
必需
一个布尔值开关,如果存在,要求工作人员提供输入。
type
选取一个字符串以设置输入的 HTML5 input-type 行为。示例包括 file 和 date。
值
一个预设值,如果工作人员未提供输入,则成为默认值。预设值显示在文本字段中。
元素层次结构
此元素具有以下父元素和子元素。
-
父元素:crowd-form
-
子元素:无
输出
提供 name 字符串作为属性名称,并将在字段中输入的文本作为其值。
例 :示例 JSON 输出
多个元素的值在相同的对象中输出,其 name 属性值作为其属性名称。无输入的元素不会显示在输出中。例如,我们使用三个输入:
<crowd-input name="tag1" label="Word/phrase 1"></crowd-input> <crowd-input name="tag2" label="Word/phrase 2"></crowd-input> <crowd-input name="tag3" label="Word/phrase 3"></crowd-input>
如果只有两个具有输入,输出为:
[ { "tag1": "blue", "tag2": "red" } ]
这意味着,任何构建用于解析这些结果的代码都应该能够对答案中每个输入是否存在作出应对。
另请参阅
有关更多信息,请参阅下列内容。