输入框的文字提示设置

作者:课课家教育更新于： 2019-03-04 16:07:52

　本文章是参照小楼老师新书《AxureRP8实战手册》，是关于的axure8.0实战案例系列教程。本教程内容建议初学者按顺序学习，理解实现的过程、思路与技巧，并以能够独立完成案例为学习目标。

　　在互联网里，输入框带提示文本的是一种十分常见的效果，输入文字后，提示的文字消失了。为了方便理解，本教程还附加了图标字体。希望小伙伴们动动你们的手指，一起跟着来操作一下吧！

　　案例1.文本框：带图标文字提示

　　案例来源：淘宝首页-搜索框

　　输入文字前：（图1-1）

　　1_1

　　输入文字后：（图1-2）

　　1_2

　　元件准备：

　　页面中（图1-3）

　　1_3

　　案例描述：

　　在搜索框里面，文本框中的文字提示包含图标。

　　思路分析：

　　文本框可以添加文字提示，而图标字体中的图标也是文字。那么我们就可以通过图标字体实现案例中的搜索图标。

　　操作步骤：

　　1、双击安装FontAwesome字体文件，载入FontAwesome4.4.0图标字体元件库；

　　2、切换到FontAwesome4.4.0图标字体元件库；

　　3、从元件库中找到图标，拖放到画布；

　　4、双击图标，复制里面的图标文字；

　　5、将复制的内容粘贴到文本框属性的{提示文字}中，并输入其它文字；（图1-4）

　　1_4

　　6、点击【提示样式】，在样式设置界面中设置提示文字字体为“FontAwesome”，字体颜色为灰色。（图1-5）

　　1_5

　　7、参考“基础56”，在web字体设置中添加FontAwesome字体的设置方案。

　　补充说明：

　　本案例需要结合特殊字体元件：FontAwesome4.4.0图标字体元件库。该元件库在本书的配套资料中。

　　使用FontAwesome4.4.0图标字体元件库，除了要参考“基础30”载入元件库，还要安装相应的字体文件。安装字体文件时，请先关闭Axure，安装完字体文件后，打开Axure方可正常使用。

　　备注：本站中FontAwesome图标字体元件库已升级为4.5.0版本，使用方法相同。