文本字段和文本区元件 #
文本字段和文本区域是表单控件,用户可以在浏览器中输入回复。它们位于 Default 元件库的 Forms 部分。
Use a text field widget :当原型设计一个期望有简短(单行)响应的表单字段时使用这个元件,例如一个用户名或密码字段(这些也适用于搜索字段)。
Use a text area widget :当原型设计一个期望有长(多行)响应的表单字段时使用这个元件,如反馈表。
提示
你可以吸附用户在文本字段和文本区域中输入的文本,并将这些文本传递给原型中的其他页面。请在 Pass Text to Next Page tutorial (opens new window) 中了解如何实现。
提示文本 #
你可以使用 Interactions 面板中的 Hint Text 字段向文本字段/区域添加提示文本(也叫 “占位符文本”)。提示文本将出现在文本字段/区域中,直到用户与之交互,这时它将消失,以允许用户根据需要填写输入内容。
你可以选择提示文字是在文本字段/区域被聚焦后还是在用户开始输入后隐藏。使用 Hide After 下拉菜单来进行选择。
提示文本默认为灰色,并以应用于文本字段/区域的字体出现。要改变提示文本的样式,请在 Interactions 面板中编辑 Hint 样式交互效果。
输入类型(仅文本字段) #
你可以给文本字段元件不同的输入类型,以显示它们在用户输入表中的功能。使用 Interactions 面板中的 Input Type 下拉菜单来选择文本字段的输入类型。
请记住,web 浏览器通常将自己的样式应用于某些类型的文本字段 。此外,当你在移动设备上选择一个文本字段时,一些字段类型会导致出现不同类型的键盘,如数字键盘而不是字母数字键盘。
注意
文本字段类型是 HTML 的一个特点,而不是 Axure 的发明 -- 我们只是让你能够使用它们。因此,你会发现某些字段类型比其他字段更适用于在 Axure RP 中工作。
不同类型的字段和使用该字段类型的结果如下。
Text: 用于基本文本输入的默认设置
Password: 文本在输入时被屏蔽
Email: 可能会在移动设备上提示电子邮件键盘
Number: 只接受数字输入,可能在移动设备上提示数字键盘
Phone Number: 可能会在移动设备上提示拨号盘
URL: 在移动设备上可能会提示输入 URL 的键盘
Search: 可能会在移动设备的键盘上增加一个搜索按钮。一些浏览器可能会添加一个 “X ”图标,你可以点击它来清除该区域。
File: 将文本字段改为浏览器中的文件上传按钮,点击后将打开设备的文件浏览器(尽管不可能将文件上传到 Axure RP 原型中)。
Date: 可能会提示一个浏览器样式的日期选择器或日历控件
Month: 可能会提示一个浏览器样式的月份和年份选择器
Time: 可能会提示一个浏览器样式的时间选择器
标签顺序 #
文本字段、文本区域和其他窗体元件的标签顺序由它们的层深度决定,如 Outline 面板中所示。你可以在 组织元件 (opens new window) 文章中了解更多关于这个问题以及如何改变元件的标签顺序。
特殊属性 #
你可以通过点击 Interactions 面板中的 Show All ,访问文本字段和文本区域元件的一些额外属性。
最大长度(仅文本字段) #
你可以使用 Interactions 面板中的 Max Length 字段来指定一个文本字段所能接受的最大输入长度。一旦达到最大字符长度,该字段将停止接受额外的文本输入。
禁用 #
禁用一个文本字段或文本区域可以防止用户在浏览器中与之交互。这同时也会激活元件的 禁用属性 (opens new window) ,使其看起来是灰色的。
有两种方法可以禁用一个元件。
检查 Interactions 面板底部的 Disabled 复选框。
用 Enable/Disable 动作在浏览器中动态地禁用该元件。你可以作为任何交互的一部分来做,比如当页面加载或点击按钮时。
提示
你可以用 Enable/Disable 动作在网页浏览器中动态地启用一个被禁用的Widgets(元件)。
只读 #
当你把一个文本字段/区域设置为 “只读” 时,已经在元件上的文本可以在浏览器中看到和选择,但它不能被用户编辑。要将一个文本字段/区域设置为只读,请在 Interactions 面板中勾选 Read Only 复选框。
特殊的Interactions(交互) #
提交按钮 #
在网页浏览器中,当一个文本字段或文本区域拥有焦点时,按下回车键可以触发页面上另一个元件的 Click or Tap 事件,也就是文本字段/区域的 “提交按钮”。
要给一个文本字段/区域指定一个提交按钮。
选择文本字段/区域,在 Interactions 面板的下部点击 Show All 。
在 Submit Button 下拉菜单中,从符合条件的元件列表中选择。
要取消提交按钮,请点击下拉菜单底部的 Unassign Submit Button 。