青銅修煉手冊:Axure輸入密碼與退格的交互效果

我想大家可能都試過在使用支付寶或者微信的時候最後都是需要輸入密碼來進行支付結賬的,今天剛好小編學習瞭如何使用Axure把鍵盤上的字輸進文本框內,由於本人比較懶,本來是想弄一個26字母鍵盤的,結果還是想想算了,弄一個數字鍵盤就好了,反正都是一樣的=,=,同樣的配方,同樣的味道,現在就讓我們開始吧。

實現步驟:

1.在畫布中放入一個,導入一張支付頁面的背景圖,然後大小按照實際自己調整一下;再放入10個矩形做成數字按鍵;再然後兩個灰色矩形和一個圖片原件,圖片原件導入一張退格鍵的圖標,並與右側灰色矩形組合到一起,將組合命名爲“BackspaceGroup”,如圖所示:

           2.在畫布中放入6個文本框,調整好位置,將文本框命名爲“Password01~Password06”,將6個文本框的類型設置爲“密碼”,最後,放入一個文本標籤,命名爲“TempText”,用於保存輸入的數字,將這個原件在快捷功能中勾選“隱藏”複選框,將其默認設置爲隱藏狀態:

          3. 爲任意一個數字按鍵添加【鼠標單擊時】的交互;設置條件爲“元件文字長度”於元件“TempText”【<】【值】“6”;添加滿足條件時的動作爲“設置文本”->“TempText”->"值"爲“[[Target.text]][[This.text]]”;公式的作用爲將目標元件目前的文字後方連接上被單擊的數字按鍵元件上的文字:

           4.繼續爲數字按鍵添加【鼠標單擊時】的交互;設置動作爲“設置文本”於元件“Password01~Password06”,“值”中分別填寫“[[t.charAt(5)]]”、“[[t.charAt(4)]]”、“[[t.charAt(3)]]”、“[[t.charAt(2)]]”、“[[t.charAt(1)]]”、“[[t.charAt(0)]]”;公式中的“t”爲局部變量,存儲的內容爲元件“TempText”的元件文字;這一步就通過公式獲取了元件“TempText”裏面的各個字符,然後,通過動作寫入到密碼框的各個文本框中:

             5. 選中設置好的交互數字按鍵,然後選中【鼠標單擊時】的名稱,通過右鍵“複製”,然後將其“粘貼”到其他數字按鍵中:

             6. 同樣,將數字按鍵的【鼠標單擊時】交互內容粘貼到退格組合“BackspaceGroup”的交互事件【鼠標點擊時】中,清除交互條件,修改第一個動作【設置文本】於元件“TempText”中的公式爲“[[Target.text.substr(0,Target.text.length-1)]]”;公式的作用是將目標元件目前的文字進行截取,截取的起始位置爲第一個字符,截取的長度爲目標元件當前文字的長度減1:。如圖所示:

         7.點擊瀏覽,就完成了

    原型查看效果地址:https://5zsm88.axshare.com

     原型RP文件下載地址:https://download.csdn.net/download/qq_27884377/10583491

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章