Axure文本框中任意位置插入字符

有人说我做原型很骚,我想这大概就是牛█的味道。哇哈哈哈哈哈哈哈哈!(为避免某些用户不适,此处隐藏一个汉字。)

今天,我再骚一回!

首先,我们先来看一张动态图片。

相信对这个案例感兴趣的朋友,已经迫不及待,想要插一插试一试。

别急!

这个案例需要使用JS才能完成。

因为,最关键的地方是获取光标在文本框中的位置。

如果你不懂JS,也没关系,复制到自己的项目中使用还是可以的。

在这里,我简单的描述一下实现的思路和过程。

1、页面打开时,获取文本框元件的控制权;

2、鼠标点击文本框时,我们需要获取到光标所在位置,并且将位置保存到全局变量中(保存在某个元件的文本中也是可以的);

3、在点击数字进行输入时,截取光标位置之前和之后的文本与按钮的文本(数字)进行连接,形成输入后的数字组合;

4、每次按数字“0”的按钮时,略有不同,如果如果光标位置不再第一个字符之前(即位置大于0),才可以插入数字“0”;

5、每次输入数字时,光标位置要增加1,需要同步到全局变量中,以便再次输入;

6、每次按退格键时,如果光标位置不再第一个字符之前(即位置大于0),要截取从第一个字符到光标位置之前(不含最后一个字符)的所有字符,并和光标之后的所有字符连接组合;

7、点击清空按钮时(C键),清空文本框中的文本内容。

以上就是实现思路,我们根据思路完成制作过程。

一、准备好所有的元件,并将文本框命名为“Num”。

二、为文本框“Num”的【载入时】添加交互,设置动作为【打开链接】,值的输入框中输入JS脚本代码,获取到Num这个元件对象并存入变量“w”。

三、为文本框“Num”的【鼠标单击时】添加交互,设置动作为【打开链接】,值的输入框中输入JS脚本代码,获取到文本框中光标的位置存入变量“p”,并创建全局变量“CharIndex”保存位置编号的数字。

四、为每个数字按钮【鼠标单击时】添加交互,进行文本的截取与组合,并将全局变量“CharIndex”中的位置编号数字加1。

文字截取并组合的公式:[[Target.text.substr(0,CharIndex)]][[This.text]][[Target.text.substr(CharIndex)]]

  • This:当前元件对象。(即被点击的按钮)
  • Target:目标元件对象。(即文本框“Num”)
  • text:元件文字。
  • substr:截取函数,能够截取文本对象中从指定位置开始一定长度的字符,省略第2个参数时,会截取到末尾。

五、数字“0”按钮的交互,需要单独添加一个条件,判断光标所在位置大于“0”,即光标不在文本开头。

六、为退格键【鼠标单击时】添加交互,进行文本的截取与组合,并将全局变量“CharIndex”中的位置编号数字减1。

同时,也要注意,光标在文本开头时,退格键也不应该发生作用,所以,也要添加和数字“0”一样的条件。

文字截取并组合的公式:[[Target.text.substr(0,CharIndex-1)]][[Target.text.substr(CharIndex)]]

七、清空按钮的交互最简单,只需要【鼠标单击时】设置文本框“Num”的文本为空即可。

到这里,我们就完成了动态图片中的所有交互效果。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

源文件下载:http://downloads.iaxure.com/text_insert.rp


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure文本框中任意位置插入字符

喜欢 (19)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 为什么没有命名文本框,光标放在中间,点击数字只会加在末尾,有人遇到同样的情况吗?
    蔚蓝心伤2018-08-28 16:32 回复