文章主要講解如何利用Axure RP 9 來模擬撥號鍵盤，一起來看看~

效果如下：

效果描述：按下數(shù)字按鈕，輸入對應(yīng)的數(shù)字，按下退回按鈕刪除上一步的數(shù)字。當(dāng)有數(shù)字時，顯示添加號碼btn和退回btn。

實現(xiàn)邏輯

函數(shù)[[LVAR.substring(from,to)]]：截取第from位到to位的字符串，舉例：[[1234567.substring(1,4)]]=234，也就是說截取第一位到第四位的數(shù)字但不包括第一位。

函數(shù)[[LVAR.length]]：字符串長度，舉例：[[手機號碼1234.length]]=4，也就是說該函數(shù)可以獲得元件字符串的長度。我們制作撥號鍵盤需要的按鈕，鼠標(biāo)按下按鈕時，為手機號碼文本框“Text 輸入”設(shè)置文本[[X]]Y,這里X是局部變量，是手機號碼文本框的文字，Y是按鈕對應(yīng)的數(shù)字，這樣就實現(xiàn)了按下鍵盤輸入對應(yīng)的數(shù)字。

我們制作撥號鍵盤的退回按鈕，點擊退回按鈕，利用上邊提到的函數(shù)截取字符串實現(xiàn)退回操作。

輸入數(shù)字

我們增加所需元件，并命名。本案例中手機號碼文本框命名為“Text 輸入”，數(shù)字鍵盤命名為btn 1、btn 2、btn 3以此類推。這里注意手機號碼文本框要選成文本框元件。

為元件 btn 1（即數(shù)字鍵盤1）設(shè)置交互：

• 鼠標(biāo)按鍵按下時，當(dāng)前元件選中為真，Text 輸入 文本為[[Number]]1（其中Number是局部變量，為“Text 輸入”的元件文字）。
• 鼠標(biāo)按鍵釋放時，當(dāng)前元件選中為假。（這里注意，之所以做選中是為了交互的效果，我設(shè)置了選中時讓按鈕變色，這樣可以更逼真的模擬撥號鍵盤）

為元件 btn 2（即數(shù)字鍵盤2）設(shè)置交互：

• 鼠標(biāo)按鍵按下時，當(dāng)前元件選中為真，Text 輸入 文本為[[Number]]2（其中Number為局部變量，是“Text 輸入”的元件文字）。
• 鼠標(biāo)按鍵釋放時，當(dāng)前元件選中為假。

為元件 btn 3 …設(shè)置交互，以此類推。

這樣，輸入數(shù)字的交互就實現(xiàn)了

如圖：

退回數(shù)字

我們?yōu)橥嘶匕粹o設(shè)置交互：

• 鼠標(biāo)按鍵按下時，設(shè)置當(dāng)前元件選中為真，設(shè)置文本Text輸入到[[Number.substr(0,Number.length-1)]]（其中Number是局部變量，為Text 輸入的元件文字）。
• 鼠標(biāo)按鍵釋放時，設(shè)置當(dāng)前元件選中為假。

這樣，退回交互就設(shè)置完成了。

附件下載鏈接：https://pan.baidu.com/s/1jXmKz58pwPO4kT3JbhJ1AQ

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議