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

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

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

一、制作原型

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

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

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

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

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

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

最終設(shè)計如圖：

二、交互設(shè)置

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

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

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

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

否則，如圖：

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

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

所有設(shè)置完畢。