Axure实现手机号码输入自动分段的教程

Axure实现手机号码输入自动分段的教程

你们一般在读手机号的时候肯定都会进行分段读,每个人都会有自己的小习惯,比如344或者434等等,那么今天就给大家讲一下关于 Axure实现手机号码输入自动分段的教程。

Axure输入手机号

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

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

Axure文本框

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

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

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

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

思路如下:

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添加变量

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

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

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

Axure文本框

这个措施很简单,添加一个case设置条件,判断如果元件文字为空值,设置当前元件文字为空值。

Axure设置当前文件为空值

以上内容就是关于 Axure实现输入手机号自动分段的教程,更多教程点击文章:Axure中如何固定顶部菜单

Leave a Reply

在线客服
客服邮箱
客服电话
17051276424