原型设计工具Axure RP参考（十五）：文本字段和文本区域小部件

?文本字段和文本区域是表单控件，用户可以在Web浏览器中输入响应。它们位于默认窗口小部件库的“表单”部分中。

文本字段和文本区域是表单控件，用户可以在Web浏览器中输入响应。它们位于默认窗口小部件库的“表单”部分中。

在为期望简短（单行）响应的表单字段（例如用户名或密码字段）制作原型时，请使用文本字段小部件。（这些也适用于搜索字段。）

在对期望长（多行）响应的表单字段进行原型制作时，请使用文本区域小部件，例如反馈表单。

注意：您可以捕获用户输入到文本字段和文本区域中的文本，并将该文本传递到原型中的其他页面。在如何将文本传递给下一页教程中了解如何。

提示文字

您可以使用“交互”窗格中的“提示文本”字段将提示文本（也称为“占位符文本”）添加到文本字段/区域。提示文本将出现在文本字段/区域中，直到用户与之交互为止，此时该提示文本将消失，以允许用户根据需要填写输入。

您可以选择在文本字段/区域成为焦点之后还是在用户开始键入之后是否隐藏提示文本。使用“在之后隐藏”下拉菜单进行选择。

输入类型（仅文本字段）

您可以为文本字段小部件提供不同的输入类型，以用户输入形式表示其功能。使用“交互”窗格中的“类型”下拉列表选择文本字段的输入类型。

请记住，Web浏览器通常将自己的样式应用于某些类型的文本字段。此外，当您在移动设备上选择文本字段时，某些字段类型将导致出现其他类型的键盘，例如数字小键盘而不是字母数字键盘。

• 注意：文本字段类型是HTML的功能，而不是Axure的发明-我们只是让您访问它们。这样，您会发现某些字段类型比其他字段类型更适用于Axure RP。
• 不同类型的字段以及使用该字段类型的结果如下：
• 密码：输入的文字被屏蔽
• 电子邮件：可能会在移动设备上提示电子邮件键盘
• 数字：仅接受数字输入，可能会在移动设备上提示数字键盘
• 电话 码：可能会在移动设备上提示拨 盘
• URL：可能在移动设备上提示输入URL的键盘
• 搜索：可以在移动设备的键盘上添加搜索按钮。某些 络浏览器可能会添加“ X”图标，您可以单击以清除该字段
• 文件：将文本字段更改为Web浏览器中的文件上传按钮，单击该按钮将打开设备的文件浏览器（尽管无法将文件上传到Axure RP原型）
• 日期：可能会提示浏览器样式的日期选择器或日历控件
• 月：可能会提示浏览器样式的月和年选择器
• 时间：可能会提示浏览器样式的时间选择器

制表顺序

文本字段，文本区域和其他表单窗口小部件的选项卡顺序由其层深度确定，如“大纲”窗格中所示。您可以在“组织小部件”文章中了解有关此内容以及如何更改小部件的选项卡顺序的更多信息。

特殊性质

您可以通过单击“交互”窗格中的“全部显示”来访问文本字段和文本区域小部件的某些其他属性。

最大长度（仅文本字段）

您可以使用“交互”窗格中的“最大长度”字段来指定文本字段将接受的最大输入长度。一旦达到最大字符长度，该字段将停止接受其他文本输入。

禁用

禁用文本字段或文本区域可防止用户在Web浏览器中与其进行交互。这还会激活小部件的“禁用”样式效果，使其显示为灰色。有两种禁用窗口小部件的方法：

• 选中“交互”窗格底部的“禁用”复选框。
• 通过启用/禁用操作在Web浏览器中动态禁用窗口小部件。您可以在任何交互过程中执行此操作，例如在页面加载或单击按钮时。

注意：您可以使用“启用/禁用”操作在Web浏览器中动态启用禁用的窗口小部件。请查看“条款和条件”教程，以获取有关如何完成此操作的示例。

只读

当您将文本字段/区域设置为“只读”时，可以在Web浏览器中看到和选择窗口小部件上已经存在的文本，但是用户无法更改。要将文本字段/区域设置为只读，请选中“交互”窗格中的“只读”复选框。

特殊互动

捕获和评估输入的文本

您可以通过操作和条件中的小部件值上的文本选项访问在文本字段或文本区域中输入的文本。例如，可以将全局变量的值设置为文本字段/区域上的文本，以将该文本带到另一个页面。

您还可以评估文本字段或文本区域的文本，使其仅在文本匹配特定值的情况下才执行特定情况，就像在验证用户名和密码组合时所做的那样。

ENTER按钮

ENTER在文本字段或文本区域在Web浏览器中处于焦点状态时，按下键可以触发页面上另一个小部件的Click或Tap事件，这就是文本字段/区域的“提交按钮”。

要将提交按钮分配到文本字段/区域：

• 选择文本字段/区域，然后单击“交互”窗格下部的“显示全部” 。
• 从“提交按钮”下拉列表中的合格小部件列表中选择。
• 要取消分配提交按钮，请单击下拉列表底部的取消分配提交按钮。

推荐阅读：

原型设计工具Axure RP入门教程

原型设计工具Axure RP新手教程

想要获得Axure RP更多资源、正版授权的伙伴，请咨询【客服】了解

标签： 页设计视图模型 站设计原型设计