输入数字时自动进行千分位

上一篇教程,我给大家演示了如何在输入手机号码时进行自动分段。

当我把这个教程发到群里分享,有朋友提出能不能做输入数字时自动进行千分位。

例如,输入1234567.89,自动能够变成1,234,567.89。

这个其实也不是很难做,但是,有一些限制。

关键在于数字的长度。

之前手机号码自动分段,因为手机号码位数固定,所以没什么问题。

但是,输入数字就不是固定位数了,所以只能有一个最大位数限制。

例如:最大输入15位数字(含逗号19位,如果含小数还需要减去小数点以及之后的位数)。

确定了位数之后,解决方案就容易了。

思路分析:

1、必须为数字才能够进行千分位;

2、未出现小数时,进行千分位;

3、输入过程中,进行千分位。

4、如果数字开头为0,需要清除掉开头的0。

通过以上思路分析,我们可以得出以下结论。

文本框【文本改变时】进行条件判断,判断内容为文本框中的内容(去除逗号后)是数字,并且文本框文字中不包含小数点。

符合上述条件,进行千分位处理。

那么,如何进行千分位处理呢?

其实和手机号码自动分段一个思路,就是对当前元件的文本去除逗号后,从后向前每3位进行截取,并连接逗号。

不过这样的话,如果数字位数不够13位的时候,就会在数字前方出现多余的逗号。

例如:This.text.replace(',','').slice(-6,-3).concat(',').concat(This.text.replace(',','').slice(-3))

通过slice函数能够对字符串进行截取,并且可以从倒数位置(负数)进行截取,当只有一个参数时,是从该参数位置截取至末尾。

上面的公式,如果输入“1234”会呈现“1,234”,但是如果输入"123"就会呈现“,123”。

怎么解决这个问题呢?

我们先不连接逗号,改为连接空格,全部连接完毕后,通过trim函数去除前方多余的空格,再把空格替换为逗号。

例如,刚才的公式改为:This.text.replace(',','').slice(-6,-3).concat(' ').concat(This.text.replace(',','').slice(-3)).trim().replace(' ',',')

这样就能够正常的出现千位符了。

不过,这里还有个问题,就是首位数字可以为0。

怎么去除这个0呢?

我们可以把替换掉逗号的数字乘以1之后再做分割,这样就能够去除0。

例如,刚才的公式继续修改为:(This.text.replace(',','')*1).slice(-6,-3).concat(' ').concat((This.text.replace(',','')*1).slice(-3)).trim().replace(' ',',')

好了,以此类推,15位的数字,只不过要按照上述方法连接的更长一些。

最终公式为:[[(This.text.replace(',','')*1).slice(-15,-12).concat(' ').concat((This.text.replace(',','')*1).slice(-12,-9)).concat(' ').concat((This.text.replace(',','')*1).slice(-9,-6)).concat(' ').concat((This.text.replace(',','')*1).slice(-6,-3)).concat(' ').concat((This.text.replace(',','')*1).slice(-3)).trim().replace(' ',',')]]

如果你不能实现这个教程的交互效果,一样能够在自己的原型中使用,只要把源文件中的文本框复制到自己的原型中,就可以了。

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

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

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


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

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

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

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


转载请注明:Axure原创教程网 » 输入数字时自动进行千分位

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 😮 :mrgreen:
    1232017-10-30 17:49 回复
  2. 老哥,走火入魔了,哈哈
    liangllk2017-11-07 15:00 回复