在转账应用的设计中，最常见的交互就是用户在屏幕上输入数字。例如，用户输入需要转账的金额，屏幕上以货币的形式显示金额，如 $45.33。在本课程中，您将学习如何使用 ProtoPie 的内置函数，实现以常见的货币格式来显示数字输入。

开始之前

打开无交互的源文件，来到包含模拟支付应用的场景。我们将在输入要发送金额的场景上进行操作。假设希望用户输入数字，例如，如果用户键入5，则将其解释为5美分并显示为0.05美元。如果用户键入50，则显示0.50美元。如果用户输入505，则显示5.05美元，依此类推。最后，我们希望显示在用户输入时实时更新。

分步说明

第一步：设置输入

我们需要一种捕捉用户输入的方法。

在画布上添加一个输入图层。暂时将其放置在“转账金额”图层和“继续”按钮之间。保留图层的默认名称为 Input 1。

稍后会将其隐藏，所以不用担心大小、字体、颜色等问题。

如果现在预览原型，会发现如果您点击输入栏，会得到正常的字母键盘。

接着将其更改为显示数字键盘。

在画布上选择输入图层，并滚动到右侧属性面板的底部，找到“键盘选项 ”部分。

在“类型”下拉菜单中，可以选择该区域被聚焦时显示的键盘类型。这里选择“数字”。

现在预览原型的话，当点击输入区域时，会出现数字键盘。

我们想让键盘在场景开始时自动出现。

添加一个「自动加载」触发当输入图层被聚焦时，键盘会出现。在「自动加载」触发下添加一个「光标」反应，对象选择 Input 1 图层，并确保选择了“光标出现”。

再次预览原型。当场景开始时，Input 1 图层被聚焦并触发了键盘的显示。然而，如果点击输入图层之外的区域，它会失去焦点，键盘将消失。由于我们希望键盘始终保持在屏幕上，因此需进行进一步的设置，以确保输入图层不会意外失去焦点。

再次滚动到输入图层的属性栏底部，找到”光标消失选项“。

取消选中“点击回车键”。取消选中“点击输入图层以外的区域”。

再次预览原型。现在无论点击哪里，输入图层都会保持焦点，并且键盘始终保持在屏幕上。

第二步：展示格式化输入

我们希望在用户输入时实时更新显示。

添加一个「监听」触发，对象选择输入图层，并选择监听 Input 1 输入图层的文本属性。