Axure模擬數字鍵盤輸入
編輯導讀:在很多案例中,都會出現鍵盤輸入的應用,學會模擬數字鍵盤輸入,對一個高保真的demo演示是有很大加分的。本文作者對如何用Axure制作模擬數字鍵盤輸入展開分析,希望對你有幫助。
哈嘍呀,上篇給大家分享了《WEB端搜索欄集錦》,是不是又學會了一個小技能呢!哈哈哈,別急,今天我們還有好貨哦!是關于Axure模擬數字鍵盤輸入的呦!
在很多案例中,都會出現鍵盤輸入的應用,學會模擬數字鍵盤輸入,對一個高保真的demo演示是有很大加分的。
操作預覽:https://gpnacy.axshare.com
一、準備元件
12個矩形框如下:
文本框,用來顯示輸入的數字:
二、設置交互
我們的目的是點擊矩形框時,上面的文本框顯示或刪除相應的數字。
選中矩形框1,添加單擊時-設置文本-設置文本框的值為 [[LVAR1]][[This.text]] ,其中LVAR1為局部變量,表示文本框的元件文字;以下是設置截圖:
點擊確定,數字矩形框的設置完成。
在屬性面板,復制1步驟中矩形框1的用例case,然后選中其他矩形框,粘貼在單擊時的case即可。
接下來設置刪除的操作交互:
在刪除矩形框之上添加一個熱區,方便點擊;
選中熱區,添加單擊時-設置文本-設置文本框的值為[[LVAR1.substr(0,LVAR1.length-1)]],其中LVAR1是添加的局部變量,表示文本框的元件文字。
這里涉及到一個函數substr。
這一步設置清空的操作交互:
同第3步,為清空按鈕添加一個熱區,選中熱區,添加單擊時-設置文本-設置文本框的文本的值為空。
這樣就設置完成了。
我們的分享就先到這里了,下期我們繼續分享,各位小主晚安!
如果幫到你的話,別忘了分享給小伙伴一起進步哦!
本文由 @啦啦啦 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議。
- 目前還沒評論,等你發揮!