Axure模擬數字鍵盤輸入

0 評論 2816 瀏覽 3 收藏 5 分鐘

編輯導讀:在很多案例中,都會出現鍵盤輸入的應用,學會模擬數字鍵盤輸入,對一個高保真的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協議。

給作者打賞,鼓勵TA抓緊創作!
1人打賞
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!