当前位置: 首页 > 工具软件 > Inputmask > 使用案例 >

inputmask的使用

白修谨
2023-12-01

最近项目中需要对一些输入数据进行格式化展示,使用了jquery.inputmask,格式化后也能提交原值,十分方便,在此记录一下。 

官网(https://github.com/RobinHerbots/Inputmask

1.导入 

项目中使用的是jquery.inputmask.bundle.js 

2. 格式化

    可结合页面上的data-inputmask=""使用,也可选中元素通过inputmask()方法动态格式化

    1)通过mask选项自定义格式

  <input data-inputmask="'mask':'999-999999'" /> 
  $(selector).inputmask({mask:"999-999999"})或$(selector).inputmask("999-999999")
清除格式化:$(selector).inputmask("remove")

    2)通过选项alias选项使用inputmask已有的一些常用数据的格式化,日期、金额、邮箱,网址、ip地址...

<input data-inputmask="'alias':'date'" />  
<input data-inputmask="'alias':'currency'" /> 
<input data-inputmask="'alias':'email'" /> 
<input data-inputmask="'alias':'url'" /> 
<input data-inputmask="'alias':'ip'" /> 或 $(selector).inputmask({alias:"ip"})  

  金额格式化 效果:21516166--->21,516,166.00 

 inputmask的currency效果: $21,516,166.00 ,在此基础上去掉前缀就能达到我们想要的效果了

通过Inputmask.extendAliases对currency 进行扩展创建新的alias
Inputmask.extendAliases({
   'money':{
      'alias':"currency",
      'prefix':""
   }
})
再在页面上设置<input data-inputmask="'alias':'money'">即可

 银行卡号格式化 :6225220280287353--->6225 2202 8028 7353

$(selector).inputmask({
   mask:"9999 9999 9999 (9{1,3})|(9{4} 9{0,3})|(9{4} 9{4} 9{0,3})",
   autoUnmask:true
})
 类似资料: