入行產(chǎn)品已經(jīng)有好些日子了，打算從產(chǎn)品壹佰的小透明轉(zhuǎn)變一下，將工作學(xué)習(xí)中的知識(shí)心得總結(jié)出來(lái)，既是一種分享，也是自己在兵荒馬亂的工作中的梳理和記錄。

成都創(chuàng)新互聯(lián)是專業(yè)的廬陽(yáng)網(wǎng)站建設(shè)公司，廬陽(yáng)接單;提供做網(wǎng)站、網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行廬陽(yáng)網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

今天想分享一下用Axure制作可以隱藏密碼文本的輸入框，制作效果如下圖：

思路：

1.      首先需要一個(gè)輸入框，但是Axure的文本框并不能實(shí)現(xiàn)對(duì)密碼的隱藏。所以，我們需要一個(gè)動(dòng)態(tài)面板，面板的狀態(tài)1是一個(gè)現(xiàn)實(shí)密碼字符的文本框，面板2的狀態(tài)是隱藏密碼字符的密碼框。

2.      需要兩張圖片，表示顯示/隱藏密碼字符。這兩張圖片通過(guò)單擊進(jìn)行切換。

3.      實(shí)現(xiàn)動(dòng)態(tài)面板與兩張圖片的交互。

思路有了，那么下面就開始做吧！

***步：

需要一個(gè)矩形來(lái)放動(dòng)態(tài)面板、圖像按鈕。添加相應(yīng)元件如圖：

第二步：

為動(dòng)態(tài)面板添加狀態(tài)：

狀態(tài)1：隱藏密碼字符

首先添加一個(gè)文本框，添加屬性如下：

狀態(tài)2：顯示密碼字符

再添加一個(gè)文本框元件，添加屬性如下：

同時(shí)我們需要取消兩個(gè)文本框的填充顏色，否則與矩形容器的顏色會(huì)不一樣。

第三步：制作圖片點(diǎn)擊切換效果

1.通過(guò)單擊切換圖片的選中狀態(tài)；

2.圖片選中狀態(tài)改變時(shí)，切換為另一張圖片：

第四步：添加交互

當(dāng)圖片按鈕的選中狀態(tài)改變時(shí)，切換動(dòng)態(tài)面板狀態(tài)：

另外，還需要將動(dòng)態(tài)面板兩個(gè)狀態(tài)中的輸入字符同步：

先為hide文本框添加：

同理，為show文本框添加：

到這里，我們就完成這個(gè)原型的制作啦！

在早期的時(shí)候，密碼框的設(shè)計(jì)習(xí)慣默認(rèn)為隱藏密碼字符。但是相信你們跟我一樣都有同感：大多數(shù)情況下沒有人站在背后偷看你的密碼，隱藏字符后反而為自己帶來(lái)不便。所以，這里我默認(rèn)是顯示密碼字符，當(dāng)有需要的時(shí)候，點(diǎn)擊圖片按鈕就可以切換到隱藏字符按鈕啦！

文章標(biāo)題：如何用Axure做一個(gè)清清爽爽的「密碼輸入框」？
標(biāo)題網(wǎng)址：http://uogjgqi.cn/article/dhjhioh.html