细说Axure-仿键盘输入

因公司业务需要，研究了一下Axure仿键盘录入的设计，只找到了Axure原型设计工场大神写的一篇关于仿键盘录入的文档，估计大神在编辑这个文档的时候用的Axure的版本比较早，跟现有的版本有些对应不上，所以就自己摸索出来8.1版本设计的流程，今天就分享给大家。

仿键盘录入其实在很多原型中都会用到，如APP原型设计、小程序的原型设计，更有甚者会在WAP站的设计中也用到。

主要功能：

1、大小写录入。

2、大小写键盘切换。

3、键盘的展示与隐藏。

4、退格。

干货内容立马奉上：

1、需要先设计几个全局变量字段：字符串-str，大写upperstr，小写lowerstr。具体设置目录在项目->全局变量中，字段的设置内容如下图：

需要将26个字母的大小写都录入进去。

2、设计画出一个键盘界面，这里就不多赘述画界面了，大家可以参照下图来完成。

需要注意，这个图需要设置两套动态模板，一套是大写，一套是小写。

3、设置字段按键参数。和Axure原型设计工场大神编写的案例不同的是，我没有设置元件的别名，在出现两个文本框的时候，会出现bug的情况，目前没有进行修改。

需要对每一个按键进行属性设置，需要对按键进行局部变量的设置。

设置完局部变量之后需要在上面将局部变量一起加上。

4、设置完26个字母的变量之后，再来设置一下退格的属性，退格属性有两种情况，一种是文本框元件中没有内容，另一种是有内容。这就需要我们设置两个case，当文本框元件中没有内容时，直接将文本框内容设置为全局变量str即可。当文本框元件中有内容时，需要先设置函数，每当点击一次退格键时，str.length的长度就要减1。

需要注意的是在两个case中需要加上if判断，编辑条件时直接选择焦点元件文字即可，这个焦点元件就是指的文本框元件。

5、设置大小写切换，需要注意的是要将26个字母全部对应上，大家设置的时候要将每个字母元件按照顺序对应上大小写的字母顺序，因为我没有设置字母元件的别名，所以看起来可能比较难理解，前面的矩形就是我设置的26个字母元件，后面对应的是在全局变量upperstr/lowerstr中字母所在的位置，借用大神的一句话：“大写状态时，从26个字母小写变量截取字符，反之从大小变量串中截取字符。”。在前面我们也有提到，设置大小写键盘的时候需要设计两种动态模板，在这里就要用到了。设置的两种动态模板需要通过if来判断当前的状态是大写还是小写，如果是大写那么判断语句中的条件就要写为if文字于（矩形）==“a”，反之同样。最后 将动态模板设置为对应的大小写模板即可。

6、空格事件的处理，大神在文章中没有详细说明如何去处理空格时间，其实很简单，只需要在设置str变量的后面加个空格即可。给大家贴个图看一下。

就在我用箭头标注的地方加个空格就可以，是不是很简单。

当你看到这一步的时候，基本上你的放键盘输入的设计基本就完成了，可以预览一下，看看实际效果。

7、键盘的展示与隐藏功能还是很简单，我就不多说了，用Axure基本的功能就可以实现。

有个问题需要说明一下，当一个页面有两个输入框的时候，需要为文本框元件设置一下别名，否则会出现两个文本框元件内容冲突的情况。