input-formatting v2.1.6

input-formatting

移动端格式化输入，如将手机号格式化为"185-6666-8888"。最为关键的是，可将光标移动到任何位置进行删除、输入操作，用户体验好。

演示

安装

NPM

npm install input-formatting -S

// ES 2015
import InputFormatting from 'input-formatting'

// 或者
var InputFormatting = require('input-formatting')

直接下载

https://unpkg.com/input-formatting@1.1.0/dist/input-formatting.js

<script src="/path/to/input-formatting.js"></script>

使用

<input type="tel" id="phone" placeholder="phone">

const phone = document.querySelector('#phone')
const phoneInput = new InputFormatting({
  input: phone,
  format: '***-****-****',
  delimiters: ['-'],
  beforeFormat: function (originValue) {
    if (originValue[0] === '0') {
      return '1234'
    }
  }
  afterFormat: function (value) {
    console.log('格式化之后的值为：', value)
  }
})

参数说明

具体配置详情，请参考使用说明

new InputFormatting(options)

• options: {Object} 参数对象，必需，key 如下表格所示

实例属性

$input

new InputFormatting(options)时传入的HTMLInputElement对象

实例方法

$stop()

停止对输入进行格式化

$reset(options)

phoneInput.$reset({
  input: phoneInput.$input
  format: '***~****~****',
  delimiters: ['~']
})

重新设置options

静态方法

InputFormatting.format

不考虑光标的情况，给定输入，返回格式化后的值

let value = InputFormatting.format({
  initialValue: '12345678901'
  format: '***-****-****',
  delimiters: ['-']
})