多语言展示
当前在线:1814今日阅读:27今日分享:41

axure教程之五文本框焦点效果:[5]

实现的目的:文本框默认有文字,如果文本框有焦点时,如果是默认文字则情况,如果不是则没有任何动作,如果文本框失去焦点时如果为空显示默认文字,如果没有则没有任何动作。我们在网页登陆的时候或者填写会员信息的时候往往会需要这样子的效果。
工具/原料

axure PR

获取焦点
1

拖动文本框到页面编辑区,并编辑里面的文字为:请输入用户名,然后设置颜色为灰色

2

添加交互效果,点击右侧的onfocus(获取焦点时)

3

在弹出的页面中 点击头部的添加条件,下拉框选择元件文字,值为:请输入用户名点击确定

4

在用例编辑器的左侧菜单中 元件/变量----》设置变量/元件值

5

点击右侧的 打开设置值编辑器按钮

6

下拉框中选择焦点元件上的文字,值设置为空然后点击确定

失去焦点
1

点击工具界面的onlostFocus(失去焦点时),然后在弹出界面点击添加条件

2

下拉框选择元件文字,点击确定

3

点击左侧的设置变量/元件值,然后在点击右侧的打开设置编辑器

4

下拉框选中焦点元件上的文字,值:请输入用户名,点击确定,然后生成原型界面网页,打开网页效果就出来啦

推荐信息