描述:首先自制輸入鍵盤組件與文本框連用,實現點擊鍵盤按鈕可與文本框綁定數據,實現鍵盤上所有的交互事件。
一、准備工具
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進行元件、交互粘貼
同理,可以自己制作九鍵的鍵盤。以上為本人自我理解,如有問題,謝謝指出(^^ゞ。
