[Axure RP 9]26键与输入框的交互


描述:首先自制输入键盘组件与文本框连用,实现点击键盘按钮可与文本框绑定数据,实现键盘上所有的交互事件。


一、准备工具

  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进行元件、交互粘贴


 

同理,可以自己制作九键的键盘。以上为本人自我理解,如有问题,谢谢指出(^^ゞ。 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM