描述:首先自制输入键盘组件与文本框连用,实现点击键盘按钮可与文本框绑定数据,实现键盘上所有的交互事件。
一、准备工具
Axure RP 9
二、工具材料
动态面板、矩形框、icon图标、文本框
三、实现步骤
1、拖入一个动态面板和一个文本框,调整其位置大小。
2、双击动态面板进入编辑,多添加几个面板状态,如大写、小写、数字
3、按照下面键盘图片在动态面板不同状态下画出(用一个大矩形框、多个小矩形框和icon图标)
3、事件交互,将键盘按钮与文本框绑定,实现不同的交互效果。
①点击切换交互事件
实现点击切换到小写键盘
实现点击切换到数字键盘
实现点击切换到大写键盘
实现点击切换到小写键盘
实现:选中要实现该交互的按钮元件,添加【单击时】的交互事件,选择设置动态面板的状态,选择要切换的状态
②数据绑定
选中字符/数字按钮设置【单击时】将按钮文本添加到文本框中
实现:[[Target.text]][[This.text]]:将目标元件上的文本与当前元件的文本绑定实现同步。
同时点击按钮后,在文本框中出现光标。
实现:在单击时事件下,选择【获取焦点】,目标元件选择文本框
③空格交互
实现:选中空格按钮单击时选择与文本框绑定空格。[[Target.text]] (后面有个空格),同时也要获取焦点
④删除交互
实现:选中删除按钮,添加单击时交互事件,使文本框内容从右逐个删除,同时获得焦点。[[Target.text.substr(0,Target.text.lenght-1)]]
⑤将其他按钮通过ctrl+c/ctrl+v进行元件、交互粘贴
同理,可以自己制作九键的键盘。以上为本人自我理解,如有问题,谢谢指出(^^ゞ。