整数输入

  1. export const enterNumber = {
  2.   bind: (el, binding) => {
  3.     // 指令作用在 element-input 节点，对应原生 div.el-input (真实input节点的父节点)
  4.     if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
  5.       el = el.getElementsByTagName('input')[0]
  6.     }
  7.     el.value = el.value.replace(/[^0-9]+/g, '')
  8.     el.handlerInput = () => {
  9.       if (el.inputLocking) return
  10.       const oldValue = el.value
  11.       const newValue = el.value.replace(/[^0-9]+/g, '')
  12.       if (oldValue !== newValue) {
  13.         el.value = newValue
  14.         el.dispatchEvent(new Event('input'))
  15.       }
  16.     }
  17.     el.handleCompositionStart = () => {
  18.       el.inputLocking = true
  19.     }
  20.     el.handleCompositionEnd = () => {
  21.       el.inputLocking = false
  22.       el.dispatchEvent(new Event('input'))
  23.     }
  24.     el.addEventListener('input', el.handlerInput)
  25.     el.addEventListener('compositionstart', el.handleCompositionStart)
  26.     el.addEventListener('compositionend', el.handleCompositionEnd)
  27.   },
  28.   unbind: (el, binding) => {
  29.     // 指令作用在 element-input 节点，对应原生 div.el-input (真实input节点的父节点)
  30.     if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
  31.       el = el.getElementsByTagName('input')[0]
  32.     }
  33.     el.removeEventListener('input', el.handlerInput)
  34.     el.removeEventListener('input', el.handleCompositionStart)
  35.     el.removeEventListener('input', el.handleCompositionEnd)
  36.   }
  37. }

保留 2 位小数输入

  1. export const enterDecimal = {
  2.   bind: (el, binding) => {
  3.     const replaceValue = val => {
  4.       // https://www.jianshu.com/p/ef3743d865ca
  5.       return val
  6.         .replace(/[^\d.]/g, '') // 将非数字和点以外的字符替换成空
  7.         .replace(/^\./g, '') // 验证第一个字符是数字而不是点
  8.         .replace(/\.{2,}/g, '.') // 出现多个点时只保留第一个
  9.         .replace('.', '$#$') // 1、将数字的点替换成复杂字符$#$
  10.         .replace(/\./g, '') // 2、将字符串的点直接清掉
  11.         .replace('$#$', '.') // 3、将复杂字符再转换回点
  12.         .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
  13.     }
  14.     // 指令作用在 element-input 节点，对应原生 div.el-input (真实input节点的父节点)
  15.     if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
  16.       el = el.getElementsByTagName('input')[0]
  17.     }
  18.     el.value = replaceValue(el.value)
  19.     el.handlerInput = () => {
  20.       if (el.inputLocking) return
  21.       const oldValue = el.value
  22.       const newValue = replaceValue(el.value)
  23.       if (oldValue !== newValue) {
  24.         el.value = newValue
  25.         el.dispatchEvent(new Event('input'))
  26.       }
  27.     }
  28.     el.handleCompositionStart = () => {
  29.       el.inputLocking = true
  30.     }
  31.     el.handleCompositionEnd = () => {
  32.       el.inputLocking = false
  33.       el.dispatchEvent(new Event('input'))
  34.     }
  35.     el.addEventListener('input', el.handlerInput)
  36.     el.addEventListener('compositionstart', el.handleCompositionStart)
  37.     el.addEventListener('compositionend', el.handleCompositionEnd)
  38.   },
  39.   unbind: (el, binding) => {
  40.     // 指令作用在 element-input 节点，对应原生 div.el-input (真实input节点的父节点)
  41.     if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
  42.       el = el.getElementsByTagName('input')[0]
  43.     }
  44.     el.removeEventListener('input', el.handlerInput)
  45.     el.removeEventListener('input', el.handleCompositionStart)
  46.     el.removeEventListener('input', el.handleCompositionEnd)
  47.   }
  48. }