快好知 kuaihz

Axure原型技巧 | 这回我们模拟下键盘输入

前两天,因粉丝询问关于键盘的输入问题,如何能模拟像软键盘一样的输入,可以添加删除文字,这里模拟一个稍微简单的键盘输入效果,说它简单是因为它不支持字符的插入操作,只模拟了全键盘和数字键盘,其它功能可以发挥你的大脑,补充完善,*_^

主要功能描述如下:

支持字母的添加

支持退格效果

可以进行大小写切换

可以切换到数字键盘

单击输入框显示键盘,输入后点击“搜索”隐藏键盘

现在开始。

1、拖一下单行输入文本放到界面上

2、单行文本输入框下面画上软键盘,使用真实的按钮,26个英文字母加上一些其它功能按钮。具体的按钮的摆放,按钮的交互样式设置不再赘述,单击下面的阅读原文在线查看后下载源文件。

把软键盘部分全部选中转成动态面板,以便于控制显示、隐藏、键盘切换。

3、给动态面板添新加个状态,加上数字键盘

4、添加变量

添加三个变量,分别保存当前输入的字符串、26个英文字母的大写、26个英文字母的小写,在切换大小写字母时用到,里面的title和rpfile不用管,是用来显示教程的标题和下载文件的名称。

5、添加事件处理

1)字母按钮事件说明

str=[[str]][[LVAR1]],这个用来拼接字符串,其中LVAR1为局部变量,给当前按下的按钮上的文字,所有的字母事件一样,其它字母复制这个事件即可,设置好变量值后,将变量值再重新赋值给输入框。

2)退格事件说明

退格就是删除当前字符串最后一位字母,使用到了字符串的截取函数substr

3)大小写切换事件,即shift键的处理

单击后,将26个按钮上的英文字母在大写和小写之间进行来回切换,使用了之前定义的两个变量,其实就是从两个变量里截取对应位置的字符。可以看到判断条件里加了判断a字母里的字符是A时认为现在都是大写状态,否则是小写状态。大写状态时,从26个字母小写变量截取字符,反之从大小变量串中截取字符。

4)数字键盘

数字键盘里的事件和字母键盘完全一样,其它按钮也加上对应事件

5)空格事件处理

单击空格时,只需要在现有str变量后面拼上一个空格。

所有事件已处理完毕,可以F5键本地试一下效果了。

点击这里查看在线演示效果,内附源文件下载

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:原型  原型词条  这回  这回词条  键盘  键盘词条  输入  输入词条  模拟  模拟词条  
原型

 简单6步用Axure绘制相机图标...

记录这些内容,只是觉得有趣,尽管可能看起来没什么用,但很多事情换个视角总会有些不同。步骤1:拖入一个矩形,宽高自定,设置圆角值、投影,填充类型选择为渐变,然后设...(展开)

原型

 Axure教程:通过关键字进行搜...

在Axure原型中,究竟是如何通过关键字进行搜索的?实现效果:通过关键字,在众多条目信息中检索出符合要求的信息,即关键字筛查功能的实现。部件:文本框、形状、表格...(展开)

原型

 Outdoor产品诞生全过程 |...

这里把这个产品的诞生过程跟大家分享一下、同时也检验一下我的一些思考。第一次发文,本文有不好的地方请指正,非常感谢。同住的一个室友比较喜欢户外活动,每周末都会去参...(展开)