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

AxureRP8.0教程 小楼一夜听春语 2173℃ 0评论

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

今天,我再骚一回!

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

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

别急!

这个案例需要使用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 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 头像
    为什么没有命名文本框,光标放在中间,点击数字只会加在末尾,有人遇到同样的情况吗?
    蔚蓝心伤2018-08-28 16:32 回复
    • 头像
      这个和编程还是有差距的,只能获取第一次点击时候的光标位置,点击下面按钮的时候上面的input就失去焦点了,要是能再加一次焦点,同时设置光标位置就好了。这样移动光标位置就能实现了。不知道这个js怎么总结出来,要是有更多用法就好了
      en2019-04-29 01:35 回复
  2. 头像
    复制过来没办法用...
    lucky2019-05-20 12:12 回复
  3. 头像
    如果清空这样设置的话,点击一次条件判断就会失效,应该再加一个点击事件CharIndex=0
    潜水水2019-09-05 15:41 回复