axure模拟数字键盘教程

axure模拟数字键盘教程

哈喽呀，上篇给大家分享了《WEB端搜索栏集锦》，是不是又学会了一个小技能呢！哈哈哈，别急，今天我们还有好货哦！是关于axure模拟数字键盘输入的呦！

在很多案例中，都会出现键盘输入的应用，学会模拟数字键盘输入，对一个高保真的demo演示是有很大加分的。

操作预览：https://gpnacy.axshare.com

一、准备元件

1、12个矩形框如下，

2、文本框，用来显示输入的数字

二、设置交互

我们的目的是点击矩形框时，上面的文本框显示或删除相应的数字；

1、选中矩形框1，添加单击时-设置文本-设置文本框的值为 [[LVAR1]][[This.text]] ，其中LVAR1为局部变量，表示文本框的元件文字；以下是设置截图：

点击确定，数字矩形框的设置完成；

2、在属性面板，复制1步骤中矩形框1的用例case，然后选中其他矩形框，粘贴在单击时的case即可。

3、接下来设置删除的操作交互

在删除矩形框之上添加一个热区，方便点击；

选中热区，添加单击时-设置文本-设置文本框的值为[[LVAR1.substr(0,LVAR1.length-1)]]，其中LVAR1是添加的局部变量，表示文本框的元件文字。

这里涉及到一个函数substr。

4、这一步设置清空的操作交互

同第3步，为清空按钮添加一个热区，选中热区，添加单击时-设置文本-设置文本框的文本的值为空。

这样就设置完成了。