編輯導(dǎo)讀：在很多案例中，都會(huì)出現(xiàn)鍵盤輸入的應(yīng)用，學(xué)會(huì)模擬數(shù)字鍵盤輸入，對(duì)一個(gè)高保真的demo演示是有很大加分的。本文作者對(duì)如何用Axure制作模擬數(shù)字鍵盤輸入展開分析，希望對(duì)你有幫助。

哈嘍呀，上篇給大家分享了《WEB端搜索欄集錦》，是不是又學(xué)會(huì)了一個(gè)小技能呢！哈哈哈，別急，今天我們還有好貨哦！是關(guān)于Axure模擬數(shù)字鍵盤輸入的呦！

在很多案例中，都會(huì)出現(xiàn)鍵盤輸入的應(yīng)用，學(xué)會(huì)模擬數(shù)字鍵盤輸入，對(duì)一個(gè)高保真的demo演示是有很大加分的。

操作預(yù)覽：https://gpnacy.axshare.com

一、準(zhǔn)備元件

12個(gè)矩形框如下：

文本框，用來顯示輸入的數(shù)字：

二、設(shè)置交互

我們的目的是點(diǎn)擊矩形框時(shí)，上面的文本框顯示或刪除相應(yīng)的數(shù)字。

選中矩形框1，添加單擊時(shí)-設(shè)置文本-設(shè)置文本框的值為 [[LVAR1]][[This.text]] ，其中LVAR1為局部變量，表示文本框的元件文字；以下是設(shè)置截圖：

點(diǎn)擊確定，數(shù)字矩形框的設(shè)置完成。

在屬性面板，復(fù)制1步驟中矩形框1的用例case，然后選中其他矩形框，粘貼在單擊時(shí)的case即可。

接下來設(shè)置刪除的操作交互：

在刪除矩形框之上添加一個(gè)熱區(qū)，方便點(diǎn)擊；

選中熱區(qū)，添加單擊時(shí)-設(shè)置文本-設(shè)置文本框的值為[[LVAR1.substr(0,LVAR1.length-1)]]，其中LVAR1是添加的局部變量，表示文本框的元件文字。

這里涉及到一個(gè)函數(shù)substr。

這一步設(shè)置清空的操作交互：

同第3步，為清空按鈕添加一個(gè)熱區(qū)，選中熱區(qū)，添加單擊時(shí)-設(shè)置文本-設(shè)置文本框的文本的值為空。

這樣就設(shè)置完成了。

我們的分享就先到這里了，下期我們繼續(xù)分享，各位小主晚安！

如果幫到你的話，別忘了分享給小伙伴一起進(jìn)步哦！

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

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