vue中如何限制文本框輸入數字

這篇文章主要介紹“vue中如何限制文本框輸入數字”，在日常操作中，相信很多人在vue中如何限制文本框輸入數字問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中如何限制文本框輸入數字”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

事件選型

首先我們很容易想到通過事件來達到目的，大致可以通過以下幾個事件來實現：

• keypress/keydown

思路：按鍵按下的時候觸發，通過判斷按下的是否是數字返回true/false來限制用戶的輸入。
缺點：無法限制用戶復制粘貼的數據。

• keyup

思路：同keypress事件，區別在于按鍵摁下彈起的時候觸發。
缺點：從界面上看有個回退（顯示用戶輸入的 不合法字符之后刪除回退）的現象，不是很自然。

• input

思路：用戶輸入的時候觸發
優點：可以在用戶復制粘貼的時候獲取到完整的值，同時不會有界面回退的現象。

初步實現

綜合各種方案的優缺點，選定input事件來實現，首先我們來實現最簡單的限制用戶只能輸入正整數。代碼如下：

<el-input v-model="model" oninput="value=value.replace(/[^\d]/g, '')" />

但是，此方法有的時候沒有很好地達到預期效果，這邊我放到最后再來講。

封裝成指令

通過自定義指令來增加相應DOM的特性，使其支持文本輸入限制。

function onInput(el, ele, binding, vnode) {
 function handle() {
 // 只保留數字
 ele.value = ele.value.replace(/[^\d]/g, '')
 } 

 return handle
}
const numberInput= {
 bind(el, binding, vnode) {
 const ele = el.tagName === 'INPUT' ? el : el.querySelector('input')
 ele.addEventListener('input', onInput(el, ele, binding, vnode), false)
 },
}
Vue.directive('number-input', numberInput)

使用方法：

<el-input v-model="model" v-number-input />

支持浮點數

我們知道v-model指令有三種修飾符lazy,  number, trim實現了不同的功能，這邊呢，也想通過v-number-input.float的方式達到支持浮點數的目的 。

修改handle回調，增加浮點數的支持

function handle() {
+ let val = ele.value
+ // modifiers為修飾符對象，傳入了float，則其float屬性為true
+ if (binding.modifiers.float) {
+ // 清除"數字"和"."以外的字符
+ val = val.replace(/[^\d.]/g, '')
+ // 只保留第一個, 清除多余的
+ val = val.replace(/\.{2,}/g, '.')
+ // 第一個字符如果是.號，則補充前綴0
+ val = val.replace(/^\./g, '0.')
+ } else {
 val = ele.value.replace(/[^\d]/g, '')
 }
 ele.value = val
}

使用方法：

<el-input v-model="model" v-number-input.float />

支持小數保留位最大位數限制

查閱官方文檔可知，指令支持參數的傳遞，這邊我們期望通過參數傳遞小數點保留位數的配置

function handle() {
 let val = ele.value
 // modifiers為修飾符對象，傳入了float，則其float屬性為true
 if (binding.modifiers.float) {
 // 清除"數字"和"."以外的字符
 val = val.replace(/[^\d.]/g, '')
 // 只保留第一個, 清除多余的
 val = val.replace(/\.{2,}/g, '.')
 // 第一個字符如果是.號，則補充前綴0
 val = val.replace(/^\./g, '0.')
+ if (typeof binding.value !== 'undefined') {
+ // 期望保留的最大小數位數
+ let pointKeep = 0
+ if (typeof binding.value === 'string' 
+  || typeof binding.value === 'number') {
+  pointKeep = parseInt(binding.value)
+ }
+ if (!isNaN(pointKeep)) {
+  if (!Number.isInteger(pointKeep) 
+   || pointKeep < 0) {
+  pointKeep = 0
+  }
+  const str='^(\\d+)\\.(\\d\{' + pointKeep + '}).*$'
+  const reg=new RegExp(str)
+  if (pointKeep === 0) {
+  // 不需要小數點
+  val = val.replace(reg, '$1')
+  } else {
+  // 通過正則保留小數點后指定的位數
+  val = val.replace(reg, '$1.$2')
+  }
+ }
 } else {
 val = ele.value.replace(/[^\d]/g, '')
 }
 ele.value = val
}

使用方法：

// 最多支持保留2位小數
<el-input v-model="model" v-number-input.float="2" />

支持負數

對正則稍加修改，只保留開頭的負號，使其支持負數

function handle() {
 let val = ele.value
 // modifiers為修飾符對象，傳入了float，則其float屬性為true
 if (binding.modifiers.float) {
 // 清除"數字"和"."以及"-"以外的字符
+ val = val.replace(/[^\-\d.]/g, '')
 // 只保留第一個'-'號
+ val = val.replace(/\.{2,}/g, '.').replace(/\-{2,}/g, '-')
 // 將 '-.' 替換成 '-0.'
+ val = val.replace(/^\./g, '0.').replace(/^\-\./, '-0.')
 if (typeof binding.value !== 'undefined') {
 // 期望保留的最大小數位數
 let pointKeep = 0
 if (typeof binding.value === 'string' 
   || typeof binding.value === 'number') {
  pointKeep = parseInt(binding.value)
 }
 if (!isNaN(pointKeep)) {
  if (!Number.isInteger(pointKeep) 
   || pointKeep < 0) {
  pointKeep = 0
  }
  // 增加'-'號的支持
+ const str='^(\\-)*(\\d+)\\.(\\d\{' + pointKeep + '}).*$'
  const reg=new RegExp(str)
  if (pointKeep === 0) {
  // 不需要小數點
+  val = val.replace(reg, '$1$2')
  } else {
  // 通過正則保留小數點后指定的位數
+  val = val.replace(reg, '$1$2.$3')
  }
 }
 } else {
 val = ele.value.replace(/[^\d]/g, '')
 }
 ele.value = val
}

支持輸入的最大值和最小值的限制

指令的參數支持對象的傳遞，因此這邊我們通過對象的字段配置最大數和最小值的配置。定義如下：

{
min: {type: number},
max: {type: number},
// 最大小數位，僅在float下有效
decimal: {type: number}
}

function handle() {
 let val = ele.value
 // modifiers為修飾符對象，傳入了float，則其float屬性為true
 if (binding.modifiers.float) {
 // 清除"數字"和"."以及"-"以外的字符
 val = val.replace(/[^\-\d.]/g, '')
 // 只保留第一個'-'號
 val = val.replace(/\.{2,}/g, '.').replace(/\-{2,}/g, '-')
 // 將 '-.' 替換成 '-0.'
 val = val.replace(/^\./g, '0.').replace(/^\-\./, '-0.')
 if (typeof binding.value !== 'undefined') {
 // 期望保留的最大小數位數
 let pointKeep = 0
 if (typeof binding.value === 'string' 
   || typeof binding.value === 'number') {
  pointKeep = parseInt(binding.value)
+ } else if (typeof binding.value === 'object') {
+  // 支持新的小數點保留位配置
+  pointKeep = binding.value.decimal
 }
 if (!isNaN(pointKeep)) {
  if (!Number.isInteger(pointKeep) 
   || pointKeep < 0) {
  pointKeep = 0
  }
  // 增加'-'號的支持
  const str='^(\\-)*(\\d+)\\.(\\d\{' + pointKeep + '}).*$'
  const reg=new RegExp(str)
  if (pointKeep === 0) {
  // 不需要小數點
  val = val.replace(reg, '$1$2')
  } else {
  // 通過正則保留小數點后指定的位數
  val = val.replace(reg, '$1$2.$3')
  }
 }
 } else {
 val = ele.value.replace(/[^\d]/g, '')
 }
+ if (val !== '' && typeof binding.value === 'object') {
+ let { min, max } = binding.value
+ min = parseFloat(min)
+ max = parseFloat(max)
+ if (!isNaN(min)) {
+ if (min >= 0) {
+  // 不能是負數
+  val = val.replace('-', '')
+ }
+ if (parseFloat(val) < min) {
+  val = min
+ }
+ }
+ if (!isNaN(max)) {
+ if (parseFloat(val) > max) {
+  val = max
+ }
+ }
+ }
 ele.value = val
}

使用方法：

// 最小為0
<el-input v-model="model" v-number-input="{ min: 0 }" />

結語

至此我們的功能已經實現得差不多了，上述代碼已經足以應對我們的大多數的需求了。但在我發現某些場景下有的時候鍵入非數字時，表單驗證獲取的數值仍然是我鍵入的字符而非空值，導致非空驗證不正確。但是這種情況并非必現的，我猜想可能是因為是vue的model數據未同步導致的，因此在上述回調函數添加上以下代碼，手動觸發數據的雙向綁定。

if (vnode.componentInstance) {
 vnode.componentInstance.$emit('input', ele.value)
} else {
 vnode.elm.dispatchEvent(new CustomEvent('input', ele.value))
}

到此，關于“vue中如何限制文本框輸入數字”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！