
4.4 重置文本框信息
案例描述
在文本框中输入“用户名”“密码”“确认密码”后,单击“重置”按钮,清空输入的信息,如图4-29所示。

图4-29 重置文本框信息
思路分析
- ▷ 为“文本框”元件设置文本类型和提示文字。
- ▷ 为“按钮”元件添加“鼠标单击时”事件,清空“用户名”“密码”“确认密码”文本框的内容。
操作步骤
(1)按Ctrl+N快捷键,新建一个Axure的文档。
(2)将“元件库”面板中的“文本标签”元件拖入编辑区中,双击使其呈编辑状态,清空文本内容并重新输入“用户名”,在工具栏中设置x为110,y为90,如图4-30所示。
(3)将“元件库”面板中的“文本框”元件拖入编辑区中,在工具栏中设置x为177,y为87,“宽度”为182,“高度”为25,在右侧“检视:文本框”区域设置名称为user_txt,在“属性”面板中的“文本框”区域设置“提示文字”为“请输入用户名”,如图4-31所示。

图4-30 设置文本标签

图4-31 设置文本框
(4)在编辑区中的空白处单击鼠标,按Ctrl+A快捷键全选编辑区中的元件,按住Shift+Ctrl快捷键的同时向下拖动鼠标,复制两次,并修改其内容和提示文字,如图4-32所示。
(5)在右侧“检视:文本框”区域分别修改其名称为password_txt、confirm_txt。在“属性”面板中设置“类型”为“密码”,如图4-33所示。

图4-32 复制元件并修改内容

图4-33 设置“类型”为“密码”
(6)将“元件库”面板中的“主要按钮”元件拖入编辑区中,双击并重新输入“重置”,在工具栏中设置x为280,y为215,“宽度”为80,“高度”为30,在右侧“检视:矩形”区域设置名称为reset,如图4-34所示。
(7)在右侧“属性”面板中双击“鼠标单击时”选项,弹出“用例编辑<鼠标单击时>”对话框,在左侧“添加动作”区域选择“设置文本”选项,在右侧“配置动作”区域选中“user_txt(文本框)”“password_txt(文本框)”“confirm_txt(文本框)”复选框,如图4-35所示。单击“确定”按钮返回至编辑区中。

图4-34 拖入“主要按钮”元件

图4-35 添加动作
(8)按Ctrl+S快捷键,以“4.4”为名称保存该文件,然后按F5键预览效果,如图4-36所示。

图4-36 最终效果