自定义文本框 | Custom Text Field

通过在特定样式的矩形元件上防止一个透明的文本框元件，来制作一个自定义文本框，使用矩形元件的选中交互样式，来提示文本框在Web浏览器中获取焦点的状态。

STEP 0：下载练习文件

如果你还没有练习文件，请下载Axure Training.rp并在Axure RP中打开它，该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程，但是如果你无法保证，那也没有关系，我们也会告诉你在不使用Axure Training.rp文件的情况下，如何创建新文件来完成教程。

STEP 1：设置文本框透明

在练习文件中打开“自定义文本框”页面，画布上有一个包含三个元件的组合：一个特定样式的矩形元件，一个文本框元件，和一个取自Axure RP图标元件库的“用户”图标元件。

在画布上单击两次文本框元件来选中它，第一次点击是选中了“自定义文本框”组合，第二次点击才是选中文本框（或者，你也可以在概要窗格中直接选择文本框）。然后滚动到检视窗口中属性页签的底部，选中“隐藏边框”，你也可以在文本框上点击右键，然后在右键菜单中选择“隐藏边框”。

接下啦，在样式工具栏或检视窗口中的样式页签下，使用“填充”颜色选择器，来设置文本框的透明填充色。透明填充色结合上隐藏边框，就可以使文本框完全透明，从而只能看到它后面的“背景”矩形。

STEP 2：预览

在Web浏览器中预览页面，然后在自定义文本框中输入一些文本。

STEP 3：当文本框获取焦点时改变样式

“背景”矩形元件已经设定了“选中”的交互样式，可以用来提示文本框在Web浏览器中获取焦点时的状态。要实现这一功能，我们需要用到文本框元件的“获取焦点时”事件。

回到Axure RP中，再次选中文本框元件，然后在检视窗口中的属性也签下，双击“获取焦点时”来添加一个新的获取焦点时用例。

在用例编辑器中，点击左侧“添加动作”栏中的“选中”（位于“设置选中”下面），然后在“配置动作”栏中选择“背景”矩形元件。这将会使矩形元件设置为选中状态，从而激活它的“选中”交互样式。

点击“确定”按钮关闭用例编辑器。

STEP 4：当文本框失去焦点时还原样式

在文本框元件被选中的状态下，双击检视窗口中属性页签下的“失去焦点时”来添加一个新的失去焦点时用例。

在用例编辑器中，点击左侧“添加动作”栏中的“取消选中”（位于“设置选中”下面），在右侧“配置动作”栏中选择“背景”矩形元件。这将会取消矩形元件的选中状态，从而停用其“选中”交互样式并恢复到默认样式。