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

尼開遠網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)建站從2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)建站。

事件選型

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

• keypress/keydown

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

• keyup

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

• input

思路：用戶輸入的時候觸發(fā)
優(yōu)點：可以在用戶復制粘貼的時候獲取到完整的值，同時不會有界面回退的現(xiàn)象。

初步實現(xiàn)

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

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

封裝成指令

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

function onInput(el, ele, binding, vnode) {
 function handle() {
 // 只保留數(shù)字
 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)

使用方法：

支持浮點數(shù)

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

修改handle回調(diào)，增加浮點數(shù)的支持

function handle() {
+ let val = ele.value
+ // modifiers為修飾符對象，傳入了float，則其float屬性為true
+ if (binding.modifiers.float) {
+ // 清除"數(shù)字"和"."以外的字符
+ 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
}

使用方法：

支持小數(shù)保留位最大位數(shù)限制

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

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

使用方法：

// 最多支持保留2位小數(shù)

支持負數(shù)

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

function handle() {
 let val = ele.value
 // modifiers為修飾符對象，傳入了float，則其float屬性為true
 if (binding.modifiers.float) {
 // 清除"數(shù)字"和"."以及"-"以外的字符
+ 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') {
 // 期望保留的最大小數(shù)位數(shù)
 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) {
  // 不需要小數(shù)點
+  val = val.replace(reg, '$1$2')
  } else {
  // 通過正則保留小數(shù)點后指定的位數(shù)
+  val = val.replace(reg, '$1$2.$3')
  }
 }
 } else {
 val = ele.value.replace(/[^\d]/g, '')
 }
 ele.value = val
}

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

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

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

function handle() {
 let val = ele.value
 // modifiers為修飾符對象，傳入了float，則其float屬性為true
 if (binding.modifiers.float) {
 // 清除"數(shù)字"和"."以及"-"以外的字符
 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') {
 // 期望保留的最大小數(shù)位數(shù)
 let pointKeep = 0
 if (typeof binding.value === 'string' 
   || typeof binding.value === 'number') {
  pointKeep = parseInt(binding.value)
+ } else if (typeof binding.value === 'object') {
+  // 支持新的小數(shù)點保留位配置
+  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) {
  // 不需要小數(shù)點
  val = val.replace(reg, '$1$2')
  } else {
  // 通過正則保留小數(shù)點后指定的位數(shù)
  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) {
+  // 不能是負數(shù)
+  val = val.replace('-', '')
+ }
+ if (parseFloat(val) < min) {
+  val = min
+ }
+ }
+ if (!isNaN(max)) {
+ if (parseFloat(val) > max) {
+  val = max
+ }
+ }
+ }
 ele.value = val
}

使用方法：

// 最小為0

結(jié)語

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

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

到此，關于“vue中如何限制文本框輸入數(shù)字”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)頁名稱：vue中如何限制文本框輸入數(shù)字
轉(zhuǎn)載注明：http://weahome.cn/article/igdepe.html