【Axure教程】高保真密碼輸入框

2 評論 6011 瀏覽 24 收藏 6 分鐘

編輯導語:密碼輸入是我們常見的一個業務場景。那么,我們可以如何利用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協議。

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 仿佛看到了當年的自己

    回復
    1. 加油哈

      回復