編輯導(dǎo)語：密碼輸入是我們常見的一個業(yè)務(wù)場景。那么，我們可以如何利用Axure來設(shè)計一個密碼輸入框？本篇文章里，作者分享了如何利用Axure設(shè)計高保真的密碼輸入框的方法，一起來看一下吧。

Hello，今天教大家做一個高保真的密碼輸入框，包括密碼可視和保密效果、以及自動判斷密碼輸入是否正確的效果。

原型預(yù)覽地址：https://ulqs8z.axshare.com

一、材料準(zhǔn)備

圖標(biāo)*2——1個是可視的圖標(biāo)，另外一個是不可視的圖片，默認(rèn)設(shè)置為隱藏。

輸入框*2——1個位普通的text文本框（可見文本框），另外一個為密碼文本框（不可見文本框），可以在文本框的屬性里修改。兩個文本框默認(rèn)隱藏邊框。然后將兩個邊框放置在同一個動態(tài)面板的2個state里面，分別為不可見和可見連個狀態(tài)。

矩形*5——我們用矩形來制作文本框的邊框，矩形的邊框設(shè)置成5中顏色，分別為未交互是的灰色邊框（普通外框），鼠標(biāo)移入時的淺藍(lán)色邊框（鼠標(biāo)移入時外框），獲取焦點(diǎn)時的深藍(lán)色邊框（輸入中外框），輸入正確的綠色邊框（輸入正確時外框），輸入錯誤時的紅色邊框（輸入錯誤是外框）。除了普通邊框，其他顏色的邊框默認(rèn)隱藏。

如下圖所示擺放：

二、交互設(shè)置

1. 不可見文本框的交互

獲取焦點(diǎn)時

顯示輸入中外框和可見密碼圖標(biāo)，隱藏其余4種顏色的的邊框和不可見圖標(biāo)。

失去焦點(diǎn)時

判斷鼠標(biāo)指針是否還在整個輸入框組合內(nèi)，如果未接觸組合，則顯示普通外框，隱藏其余4種顏色的的邊框和2個圖標(biāo)；如果本輸入框的值為空，則顯示輸入錯誤時外框，隱藏其余4種顏色的的邊框和2個圖標(biāo)。

這里我們根據(jù)需求繼續(xù)增加條件，例如我們希望他必須包含數(shù)字和字母，我們的條件就是輸入框的值不包含數(shù)字和字母，則顯示輸入錯誤時外框，其他隱藏；如果設(shè)置的所有條件都滿足，即else if true，則顯示輸入正確時外框，隱藏其余4種顏色的的邊框和2個圖標(biāo)。

2. 可見文本框的交互

其實(shí)可見文本和不可見文本的交互基本一致，大家可以直接復(fù)制上面做好的不可見文本框，然后將文本類型設(shè)為普通，獲取焦點(diǎn)時，由原來的顯示不可見密碼圖標(biāo)改為顯示可見密碼圖標(biāo)。

除此之外，還要增加一個交互，因為可見文本框可以輸入中文，所以我們在文本改變時，需要判斷輸入的是否為中文，如果是中文的話，就不輸入。

中文的編碼是在19968到40662之間，所以我們可以用slice函數(shù)來取最后一位輸入的文本，然后用charcodeat函數(shù)判斷他的編碼，如果在19968到40662之間，就設(shè)置文本的長度減1。

3. 可見密碼圖標(biāo)的交互

鼠標(biāo)單擊可見密碼圖標(biāo)的時候：

• 隱藏和顯示——首先要隱藏可見密碼圖標(biāo)，顯示不可見密碼圖標(biāo)；
• 設(shè)置文本——將當(dāng)前輸入的不可見文本框的值，傳過去給可見文本框；
• 設(shè)置動態(tài)面板——設(shè)置動態(tài)面板為可見狀態(tài)；
• 設(shè)置焦點(diǎn)——最后將焦點(diǎn)設(shè)置在可見文本框。

4. 不可見密碼圖標(biāo)的交互

不可見密碼圖標(biāo)的交互和可見的非常類似，同時是先隱藏該圖片，然后顯示可見密碼圖片，然后把值傳過去不可見文本框，設(shè)置動態(tài)面板的值為不可見，以及將焦點(diǎn)設(shè)置在不可見文本框內(nèi)。

那到這里我們就完成了高保真密碼輸入框的制作了，我們下期再見，88。

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。