手机号码输入时自动分段

这一篇教程,我们一起来完成手机号码输入时自动分段的交互效果。

这个交互效果,需要使用到多个字符串函数,进行替换、链接、截取和去除空格。

不过,即便你没有看懂它的实现原理,或者说没有学会这个交互的实现,也没有关系。

你只需要把写好的内容,复制到自己的原型中就能够使用。

首先,我们先来看看是什么样的手机号码分段效果。

上面,是一个虚假的手机号码(请勿拨打)。

当我们在文本框中进行输入时,它会自动的进行分段。

例如,输入“1588”,它就会自动变成“158 8”。

好了,既然需求很明确了,接下来准备元件。

这里只需要一个文本框和一个水平线。

摆放好之后,我们可以在文本框的属性中隐藏文本框的边框,这样看起来就是在一条横线上输入内容。

另外,还可以在文本框的属性中添加提示文字,以及限制文本框的文字长度为“13”(不要忽略分段后的两个空格)。

完成了元件的准备,我们就可以添加交互了。

在文本框中输入文字时(文本改变时),让输入的手机号码自动分段,只需要一个动作。

这个动作就是重新设置文本框的文本为分段后的手机号码。

所以,关键在于如何将输入的手机号码进行分段。

思路如下:

1、分段时,我们需要将手机号码,变成“3-4-4”的格式,那么,我们需要将前三位、中间4位以及末尾四位进行截取;

2、在输入号码时,因为会做分段处理,当输入位数超过3个,号码中会包含空格,所以,截取之前需要先将号码中的空格清除;

3、分段时,截取到的各部分号码之间要连接一个空格;

4、在输入号码时,因为连接了空格,当输入位数超过3个,当前输入数字之前会有多余的空格,需要把这个空格清除掉。

实现步骤:

1、根据上述思路,我们先完成第2个思路的公式,将当前输入的号码中所有的空格去除。

当前公式内容为:This.text.replace(' ','')

通过replace函数,将当前元件文字中的空格替换为空值。

2、参考第1个思路,进行号码的截取。

第1段号码:This.text.replace(' ','').substr(0,3).

第2段号码:This.text.replace(' ','').substr(3,4).

第3段号码:This.text.replace(' ','').substr(7).

通过substr函数能够从字符串指定位置(第1个参数)开始时截取一定的长度(第2个参数),如果不指定截取长度,则会从指定位置截取到末尾。

注意:字符串中字符的位置从0开始。

3、参考第3个思路,我们需要在号码段之间连接空格。

当前公式内容为:This.text.replace(' ','').substr(0,3).concat(' ').concat(This.text.replace(' ','').substr(3,4)).concat(' ').concat(This.text.replace(' ','').substr(7))

通过concat函数能够将文本对象和指定字符(参数)连接。

这里要注意嵌套关系,第2、3段号码是concat函数的参数,简化来看就是,第1段号码.concat(空格).concat(第2段号码).concat(空格).concat(第3段号码)。

4、参考第4个思路,我们去除号码之后的空格。

当前公式内容为:This.text.replace(' ','').substr(0,3).concat(' ').concat(This.text.replace(' ','').substr(3,4)).concat(' ').concat(This.text.replace(' ','').substr(7)).trim()

通过trim函数能够将文本对象两侧的空格去除。

大家可以先不加这个函数进行测试,就会看到第4个思路中描述的异常情况。

当完成以上步骤之后,我们就完成了手机号码输入时自动分段的交互效果。

不过,这个交互效果实现之后,我们面临着Axure RP 8的一个软件Bug。

大家可以通过退格键,删除所有输入的内容,这时候能够看到,本来应该出现的提示文字“请输入手机号码”,变成了文本框中的输入内容。

mmp,本来很完美,结果发现特么漏了......还得采取补救措施。

这个措施很简单,添加一个case设置条件,判断如果元件文字为空值,设置当前元件文字为空值(不孕不育还带套的感觉...)。

好了,以上就是手机号码输入时自动分段这个交互效果的全部实现过程,你爽了吗?

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

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址http://www.kouer.com。

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

 

 


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

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

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

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 手机号码输入时自动分段

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 小楼老师你好,我通过您的方法来进行了交互,但是预览后的效果没有达到预期,想问一下老师是可能是什么原因导致的? 预览结果如下: 1.当无内容输入时,显示内容为“请输入手机号码”,OK,这步没有问题; 2.但是当输入手机号码时,显示内容为之前输入的公试“[[This.text.replace(‘ ‘,”).substr(0,3).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(3,4)).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(7)).trim()]]”,而不是预期的手机号码分段显示。
    玉凤2017-11-06 10:25 回复
  2. 在输入过程中比如:111223时候发现输入错误,我想把3删除,发现删除不了,请问怎么解决在输入过程中出现输入错误的情况
    bzyg2017-11-13 09:44 (7天前)回复