简介
输入字段是用于收集各种类型信息的关键元素——这些信息可能需要不同的格式和字符长度限制（例如电话号码、姓名、搜索词等）。
ProtoPie 可以让你轻松原型化一个输入字段：它能自动检测用户的输入何时满足特定条件，并通过简单的自定义公式应用格式要求。你也可以进一步挑战自己，学习如何将用户输入存储到变量中，以简化工作流程。
你将学到什么
创建变量以存储输入文本长度（推荐步骤）
使用 detect 和 condition 格式化输入文本
使用公式限制文本长度
使用 detect 和 condition 修复删除逻辑
最后，你将能够做出这样的效果！
分步说明
1. 创建变量以存储输入文本长度（推荐步骤）
为了让 ProtoPie 自动格式化这个输入字段，我们需要始终知道输入文本长度。简化这一流程的一个快速方法是创建一个自定义变量来检测输入文本长度值。
💡 变量如何让我们的工作流程更轻松？
变量可以存储在原型中会被反复引用的值或公式。与其不断重复输入所有这些信息，你只需输入变量名即可达成目标。
1. 在左下角面板中，点击“+”图标创建一个新的For This Scene变量。为了便于组织管理，请将该变量重命名为length。
2. 在属性面板中，勾选Use Formula。（此功能仅适用于Variables For This Scene）
3. 我们将存储在这个变量中的公式是 length('Input'.text)，它会持续返回输入图层中的字符数量。
💡 length()：这是一个预定义的文本函数，用于告诉 ProtoPie 统计从文本字符串中检测到的字符数量。
length(source:TEXT)→ NUMBER
4. 为新变量打开调试功能。我们在预览窗口中查看一下。
2. 使用 detect 和 condition 格式化输入文本
1. 给输入框添加一个Detect触发器。在属性面板中选择检测其Text。
2. 在 Detect 触发器内添加一个Condition。在属性面板中选择Formula。这里使用的公式是 length('Input'.text)，或者直接输入 length。它返回输入内容的字符数。
对于这个条件，我们设置 length('Input'.text) = 4，或者直接输入 length = 4
3. 给Input图层添加一个Text响应，并在文本字段中使用公式。
这里使用的公式是 'Input'.text + " "
我们是在现有文本后添加一个空格和一个零宽不连字字符（ZWNJ）。你可以直接把这个公式复制到 studio（其中包含 ZWNJ）。或者你也可以在这里复制一个 ZWNJ。
💡 为什么要加 ZWNJ，而不是再加一个空格字符？
ZWNJ 可以在不增加可见空格的情况下增加一个字符计数。对于这种卡号格式，我们在每 4 个数字之间只需要一个可见空格。为了保持这个格式要求并让删除逻辑正常工作——我们会在后续步骤讲到——我们需要一个不会带来可见空白的额外字符。
4. 我们需要在下方显示的指定条件下添加相同的Text响应。为了检查 ProtoPie 是否正确检测文本长度，你可以使用debug功能在预览窗口中显示变量值。
重复上一步，并在每个条件的Text响应中使用相同公式（'Input'.text + " "）。这会告诉 ProtoPie 在 Input 文本长度 = 4**、10，和 1****6** 后立即插入一个空格。
3. 使用公式限制文本长度
在这个用例中，文本最大长度应为 22。当文本长度达到 22 时，不应再允许输入更多字符。我们需要使用一个公式来实现这一点。
1. 当Input图层的文本长度（或“length”）≥ 22 时，再添加一个条件
2. 同样地，在此条件下，我们也给Input图层添加一个Text响应并使用公式。这里的公式是 left('Input'.text,22)
💡 left()：left() 是一个预定义文本函数，告诉 ProtoPie 按指定字符数从左侧提取部分文本。在这个例子中，ProtoPie 会从Input文本图层的左侧开始提取前 22 个字符。
left(source:TEXT,count:NUMBER)→ TEXT
3. 让我们在预览窗口中检查。长度达到 22 后，将无法继续输入更多字符。
4. 使用 detect 和 condition 修复删除逻辑
此时，尝试删除最后四个字符。你会注意到：当我们继续删除超过最后四个字符时，长度计数会降到 17，然后又跳回 18。
这是因为我们此前在文本长度为 16 的条件下设置了 'Input'.text + " " 这个公式响应。一旦字符计数达到 16，空格和 ZWNJ 会立即被添加，因此文本长度会立刻再次变为 18。
为了让删除逻辑重新可用，我们需要创建另一组面向删除的条件，以绕开我们已建立的格式化条件。
我们先添加一个文本长度为 17 的条件。在这个条件下，将文本长度裁剪为 15。
图片展示了当长度 = 17 时添加这个新条件，如何让原型继续删除字符到 15。
1. 再次给输入框添加一个新的Detect触发器。
💡 为什么要创建新的“Detect”触发器？
将两种不同用途（输入和删除）分开使用触发器，可以让层级结构更清晰。你也可以跳过这一步继续使用之前的 detect 触发器，但可能会变得混乱。
2. 将第一个条件设置为文本长度 = 17
💡 为什么把条件设为文本长度 = 17？
由于我们已经有一个在文本长度达到 16 时插入两个字符的条件，为了不再次触发插入响应，当长度降到 17 时就必须额外删除两个字符。这意味着当用户删除到 17 个字符时，原型会把文本进一步删到 15 个字符。
这会删除用于输入格式化的空格字符和 ZWNJ。
3. 在此条件内，为Input图层添加一个Text响应。
这个文本响应中我们会使用不同的公式。这里使用的公式是 left('Input'.text,15)
💡 这个公式的结果应该是什么？
这个新公式告诉 ProtoPie：当字符数达到 17 时，从左侧开始提取“Input”文本图层的前 15 个字符。这样会让字符计数越过 16，避免触发输入时的插入逻辑，从而允许你继续删除文本。试着预览你的原型，看看删除到 17 个字符时的响应。
4. 添加一个文本长度为 11 的条件。在这个条件下，将文本长度裁剪为 9。
这一步与前一步类似。
条件：
length('Input'.text) = 11文本：
left'Input'.text,9)
5. 再添加一个文本长度为 5 的条件。在这个条件下，将文本长度裁剪为 3。
同样重复上一步，并使用以下数值
条件：
length('Input'.text) = 5文本：
left('Input'.text,3)
6. 让我们在预览窗口中检查。
你做到了！
太棒了！你已经学会了如何创建格式化输入字段元素、实现字符长度限制，并确保删除逻辑正常工作——让你的用户可以修改他们输入的文本。你甚至可能已经尝试过使用变量来简化工作流程。
这次需要学习和操作的内容很多，所以请为你的成果感到自豪！
继续在 ProtoPie 中尝试这些方法，创建更真实的体验。我们很想看到你那些疯狂的实验。创建你自己的原型，并在 Twitter 或 Instagram 上带上 #MadeWithProtoPie 分享出来。
