5.3　文本焦点效果

案例描述

在登录场景中，包含用户名和密码输入框。当获取文本框的焦点时，文本框中默认文字清空，且边框会高亮呈淡蓝色；当文本框失去焦点时，高亮显示就会消失，文本框中显示默认文字，如图5-20所示。

思路分析

• ▷　输入框的样式在两种不同状态下切换，可以通过交互样式来实现。
• ▷　文本框获取焦点时，呈现选中的样式。
• ▷　文本框失去焦点时，呈现未选中的样式。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）将“元件库”面板中的“文本标签”元件拖入编辑区中，双击“文本标签”元件进入编辑状态，输入“用户名”，然后拖入一个“文本框”元件到编辑区适当的位置，并设置“宽度”为180，“高度”为25，效果如图5-21所示。

（3）双击“文本标签”元件进入编辑区，输入“请输入用户名”，并命名为username，在右侧“样式”面板中的“字体”区域单击“字体颜色”下拉三角按钮，在弹出的颜色面板中选择灰色（#CCCCCC）色块，如图5-22所示，将输入框中的颜色设置为灰色。

（4）在编辑区中选择文本框，在右侧“属性”面板中的“添加用例”区域鼠标右键单击“获取焦点时”，在弹出的快捷菜单中选择“添加用例”命令，弹出“用例编辑<获取焦点时>”对话框，如图5-23所示。

（5）单击“添加条件”按钮，弹出“条件设立”对话框，单击this右侧下拉三角按钮，在弹出的下拉菜单中选择“用户名（文本框）”选项，在右侧文本框中输入“请输入用户名”，如图5-24所示，单击“确定”按钮返回至“用例编辑<获取焦点时>”对话框。

（6）在左侧“添加动作”区域选择“设置文本”选项，在右侧“配置动作”区域选中“焦点元件”复选框，在下方“设置文本为”区域设置“值”为空，如图5-25所示，单击“确定”按钮返回至编辑区中。

（7）在编辑区中选择“文本框”元件，在右侧“属性”面板中的“添加用例”区域，右击“失去焦点时”，在弹出的快捷菜单中选择“添加用例”命令，弹出“用例编辑<失去焦点时>”对话框，单击“添加条件”按钮，弹出“条件设立”对话框，单击this右侧下拉三角按钮，在弹出的下拉菜单中选择“用户名（文本框）”选项，在右侧文本框中保持默认为空，如图5-26所示，单击“确定”按钮返回至“用例编辑<失去焦点时>”对话框。

（8）在左侧“添加动作”区域选择“设置文本”选项，在右侧“配置动作”区域选中“用户名（文本框）”复选框，在下方“设置文本为”区域设置“值”为“请输入用户名”，如图5-27所示，单击“确定”按钮返回至编辑区中。

（9）用同样的方法，制作密码文本框，如图5-28所示。

（10）按Ctrl+S快捷键，以“5.3”为名称保存该文件，然后按F5键预览效果，如图5-29所示。