axure怎么加矩形可以在网页中输入数字

1、首先拖入一个矩形框，设置好线段颜色，并在右侧 *** 作栏设置【交互样式设置】中的鼠标悬停和选中效果，这边我设置了鼠标悬停和选中时“线段颜色”及“外部阴影”。2、再拖入一个矩形框，设置高度与宽度，并设置矩形填充颜色及边框可见性，只显示右边的边框。3、从元件库拖入“减号”或者从网上下载“－”的图标，放置“步骤2”中的矩形框中，从元件库中拖入“－”减号图标需要按需调整一下大小及颜色，将“步骤2”中的矩形框与减号图标设置为组合。4、接下来按照“步骤2”和“步骤3”制作“＋”号图标；复制“步骤2”中的矩形框，设置边框可见性，在拖入“＋”图标。5、接着拖入一个文本框放置在中间剩余区域，设置文本框的名字为“数字输入”，选中文本框，右键【隐藏边框】。6、最后再拖入一个文本框放置在控件的右侧，命名为“步长”，文本框中根据你需要自动增加或者减少的数值进行输入（假设输入1 ，则点击加号时，文本框自动加1）。

首先，在Axure画板中，拖入19个矩形框，组成如下图所示的计算机 *** 作界面

在 *** 作界面上方，拖入一个矩形框，并填充为黑色，在矩形框上，拖入一个文本框记为text001，文本框的字体颜色设置为白色

完成以上两步后，一个简单的计算器的界面就算完成了

给数字键添加点击效果，点击数字键的时候，背景填充为灰色

给功能键（加、减、乘、除、等）添加点击效果，点击时，背景填充为红色，字体变为白色

设置清零按钮的点击事件，点击AC时，text001变为0

设置数字键的点击事件，点击数字键时，text001

需要插入文本框才可以

1、在输入内容之前就已经完全禁止输入，所有看不到自己输入的内容是什么（数字除外）

2、在文本框的右侧有按钮可以对数字进行增减。

如果前面的设置方法做的并不是我们想要的效果的话，我们就必须另外想办法达到我们的要求。常规的办法不行，我们就要考虑用交互设置的方法来制作。

当然，输入的内容分为数字和非数字两种，所以我们需要设置用例条件。如果输入的内容是数字的话，就让文本框的内容等于我们输入的内容；如果输入的内容不是数字的话，就让文本框的内容等于0，也就是空值。

只是这样就够了吗？还没有。

因为这里存在着二次输入的情况，也就是第一次输入数字，在接着输入的时候可能是数字一位的内容。像这样：

所以我们的事件不能简单的设置在“文本改变时”，而是需要设置在“按键松开时”，在每一次按键松开时都做一次判断。

那么问题又来了，不是一次输入完成的内容，我们怎么判断呢？我们需要借助全局变量，把输入的内容用全局变量保存起来，然后再结合用例条件去设置。把全局变量的初始值设置为空，如果文本框输入的内容是数字的话，就让全局变量等于文本框的值。

这时，全局变量的值为“11”。如果我在11的后面再输入不是数字的内容。这时设置文本框的值等于全局变量的值，也就是刚才保存下来的“11”，所以就达到了不能输入数字以外的内容的效果。

如果不输入了，把文本框内容清空掉了，就将全局变量的值设置为空值即可。这样在下次输入的时候又会开始新一轮的条件判断了。

这个方法也可以用在其他的输入内容的类型设置上，或者文字的判断上。掌握了方法之后我们就可以将它灵活应用，解决我们工作中的很多问题。

---