• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure原型技巧 | 这回我们模拟下键盘输入

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

作者: @Axure原型设计工场  字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure原型库,axure原型案例下载,axure原型,axure原型图,axure原型设计实例等相关知识, @Axure原型设计工场 希望在学习及工作中可以帮助到您

yuanxingjiqiao

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

主要功能描述如下:

  1. 支持字母的添加
  2. 支持退格效果
  3. 可以进行大小写切换
  4. 可以切换到数字键盘
  5. 单击输入框显示键盘,输入后点击“搜索”隐藏键盘

现在开始。

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

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

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

26字母英文键盘

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

数字键盘

4、添加变量

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

添加两个26字母变量

5、添加事件处理

1)字母按钮事件说明

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

字母事件说明

2)退格事件说明

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

退格事件说明

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

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

大小写切换事件

4)数字键盘

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

5)空格事件处理

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

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

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

您可能想查找下面的文章:

  • Axure原型设计之轮播图
  • Axure原型技巧 | 这回我们模拟下键盘输入

相关文章

  • 2017-06-14Axure教程 | 图片放大器
  • 2017-06-13如何在Axure RP 8 中规范使用 Font Awesome 图标库完成设计
  • 2017-06-14Axure教程|如何制作”返回顶部”原型功能?
  • 2017-06-13Axure教程:用中继器和日期函数实现万年历
  • 2017-06-14Axure教程 | 原型中的商品图放大镜效果
  • 2017-06-13Axure教程:如何画出曲线图?
  • 2017-06-13Axure中继器:制作可交互的“APP音乐播放列表页”
  • 2017-06-14axure九宫格拼图的实现原理
  • 2017-06-14建立自己的元件库(二)——验证码
  • 2017-06-14Axure原型技巧 | 这回我们模拟下键盘输入

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure实战:滑动拼图解锁教程
    • axure实现坦克游戏原型
    • Axure8.0原型案例:制作手机拨号界面
    • Axure教程:如何制作炫酷高效的元件库?
    • Axure教程:12306图片验证码的实现(随机可验证)
    • Axure教程:可使用的计算器demo制作(下)
    • Axure教程——页面载入进度条
    • Axure教程:多账户的登录验证
    • Axure RP设计伸缩导航、遮罩弹窗、返回顶部的方法
    • Axure基础教程—文本框用法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有