輸入郵箱時(shí)，如果自動(dòng)帶出郵箱地址，就會(huì)方便許多。如何用Axure8.0制作出自動(dòng)帶出郵箱地址的效果呢？本文作者分享了教程，希望能給你帶來幫助。

本次分享的的案例是Axure8.0制作的自動(dòng)帶出郵箱地址效果：

預(yù)覽及下載地址：https://51x7ns.axshare.com

一、制作原型

1、拖入一個(gè)矩形元件，設(shè)置寬度：66px，高度：20px，輸入內(nèi)容：“請(qǐng)輸入郵箱”，字體設(shè)置為：微軟雅黑，如圖：

2、拖入一個(gè)矩形元件，設(shè)置寬度：240x，高度：40px，對(duì)其“選中”狀態(tài)進(jìn)行設(shè)置，如圖：

3、拖入一個(gè)文本框在矩形框中，設(shè)置寬度：236x，高度：35px，設(shè)置類型為：文本，提示文字為：郵箱，提示樣式為：#999999，隱藏提示觸發(fā)選擇“獲取焦點(diǎn)”，勾選“隱藏邊框”選項(xiàng)，如圖：

4、拖入一個(gè)矩形框，設(shè)置寬度：240x，高度：173px，命名為：矩形容器，對(duì)其陰影樣式進(jìn)行設(shè)置，如圖：

5、拖入五各矩形框放入“矩形容器”中，設(shè)置寬度：240x，高度：40px，分別命名為：1、2、3、4，分別對(duì)其進(jìn)行交互樣式設(shè)置，如圖：

“矩形容器”與其四個(gè)矩形組合，并設(shè)為隱藏，如圖：

最終設(shè)計(jì)如圖：

二、交互設(shè)置

1、對(duì)文本框進(jìn)行“文本改變時(shí)”交互設(shè)置，如果文本狀態(tài)為“ture”時(shí)，1的設(shè)置文本為[[LVAR1]]@qq.com，如圖：

2的設(shè)置文本為[[LVAR1]]@126.net，如圖：

3的設(shè)置文本為[[LVAR1]]@163.com，如圖：

4的設(shè)置文本為[[LVAR1]]@139.com，如圖：

否則，如圖：

2、對(duì)文本框進(jìn)行”獲取焦點(diǎn)時(shí)“與”失去焦點(diǎn)時(shí)“進(jìn)行設(shè)置，如圖：

3、對(duì)組合的中的每個(gè)矩形（1、2、3、4）進(jìn)行”鼠標(biāo)點(diǎn)擊時(shí)“進(jìn)行設(shè)置，如圖：

所有設(shè)置完畢。