[Axure RP 9]26鍵與輸入框的交互


描述:首先自制輸入鍵盤組件與文本框連用,實現點擊鍵盤按鈕可與文本框綁定數據,實現鍵盤上所有的交互事件。


一、准備工具

  Axure RP 9

二、工具材料

  動態面板、矩形框、icon圖標、文本框

三、實現步驟

1、拖入一個動態面板和一個文本框,調整其位置大小。

 

 

2、雙擊動態面板進入編輯,多添加幾個面板狀態,如大寫、小寫、數字

 

3、按照下面鍵盤圖片在動態面板不同狀態下畫出(用一個大矩形框、多個小矩形框和icon圖標)

 

 

 3、事件交互,將鍵盤按鈕與文本框綁定,實現不同的交互效果。

①點擊切換交互事件

實現點擊切換到小寫鍵盤

 

實現點擊切換到數字鍵盤

 

實現點擊切換到大寫鍵盤

 

  實現點擊切換到小寫鍵盤

實現:選中要實現該交互的按鈕元件,添加【單擊時】的交互事件,選擇設置動態面板的狀態,選擇要切換的狀態

 ②數據綁定

選中字符/數字按鈕設置【單擊時】將按鈕文本添加到文本框中

實現:[[Target.text]][[This.text]]:將目標元件上的文本與當前元件的文本綁定實現同步。

 

同時點擊按鈕后,在文本框中出現光標。

實現:在單擊時事件下,選擇【獲取焦點】,目標元件選擇文本框

 

③空格交互

實現:選中空格按鈕單擊時選擇與文本框綁定空格。[[Target.text]] (后面有個空格),同時也要獲取焦點

④刪除交互

實現:選中刪除按鈕,添加單擊時交互事件,使文本框內容從右逐個刪除,同時獲得焦點。[[Target.text.substr(0,Target.text.lenght-1)]]

⑤將其他按鈕通過ctrl+c/ctrl+v進行元件、交互粘貼


 

同理,可以自己制作九鍵的鍵盤。以上為本人自我理解,如有問題,謝謝指出(^^ゞ。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM