中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、材料準備

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

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

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

如下圖所示擺放：

二、交互設(shè)置

1. 不可見文本框的交互

獲取焦點時

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

失去焦點時

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

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

2. 可見文本框的交互

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

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

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

3. 可見密碼圖標的交互

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

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

4. 不可見密碼圖標的交互

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

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

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

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