編輯導語：密碼輸入是我們常見的一個業務場景。那麼，我們可以如何利用Axure來設計一個密碼輸入框？本篇文章裡，作者分享瞭如何利用Axure設計高保真的密碼輸入框的方法，一起來看一下吧。

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

原型預覽地址：https：//ulqs8z。axshare。com

一、材料準備

圖示*2

——1個是可視的圖示，另外一個是不可視的圖片，預設設定為隱藏。

輸入框*2

——1個位普通的text文字框（可見文字框），另外一個為密碼文字框（不可見文字框），可以在文字框的屬性裡修改。兩個文字框預設隱藏邊框。然後將兩個邊框放置在同一個動態面板的2個state裡面，分別為不可見和可見連個狀態。

矩形*5

——我們用矩形來製作文字框的邊框，矩形的邊框設定成5中顏色，分別為未互動是的灰色邊框（普通外框），滑鼠移入時的淺藍色邊框（滑鼠移入時外框），獲取焦點時的深藍色邊框（輸入中外框），輸入正確的綠色邊框（輸入正確時外框），輸入錯誤時的紅色邊框（輸入錯誤是外框）。除了普通邊框，其他顏色的邊框預設隱藏。

如下圖所示擺放：

二、互動設定

1.不可見文字框的互動

獲取焦點時

顯示輸入中外框和可見密碼圖示，隱藏其餘4種顏色的的邊框和不可見圖示。

失去焦點時

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

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

2.可見文字框的互動

其實可見文字和不可見文字的互動基本一致，大家可以直接複製上面做好的不可見文字框，然後將文字型別設為普通，獲取焦點時，由原來的顯示不可見密碼圖示改為顯示可見密碼圖示。

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

中文的編碼是在19968到40662之間，所以我們可以用slice函式來取最後一位輸入的文字，然後用charcodeat函式判斷他的編碼，如果在19968到40662之間，就設定文字的長度減1。

3.可見密碼圖示的互動

滑鼠單擊可見密碼圖示的時候：

隱藏和顯示

——首先要隱藏可見密碼圖示，顯示不可見密碼圖示；

設定文字

——將當前輸入的不可見文字框的值，傳過去給可見文字框；

設定動態面板

——設定動態面板為可見狀態；

設定焦點

——最後將焦點設定在可見文字框。

4.不可見密碼圖示的互動

不可見密碼圖示的互動和可見的非常類似，同時是先隱藏該圖片，然後顯示可見密碼圖片，然後把值傳過去不可見文字框，設定動態面板的值為不可見，以及將焦點設定在不可見文字框內。

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

本文由@做產品但不是經理原創釋出於，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。

TAG: 文字框可見圖示邊框密碼