淺談vue限制文本框輸入數(shù)字的正確姿勢

更新時間：2019年09月02日 10:50:38 作者：Jkanon

這篇文章主要介紹了vue限制文本框輸入數(shù)字的正確姿勢，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

最近遇到一個需求，需要限制文本框輸入數(shù)字，而number類型的輸入框有箭頭，個人不是很喜歡，因此想要尋求其它途徑實現(xiàn)。本想通過網(wǎng)上找個現(xià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ù)。代碼如下：

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

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

封裝成指令

通過自定義指令來增加相應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)

使用方法：

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

支持浮點數(shù)

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

修改handle回調，增加浮點數(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
}

使用方法：

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

支持小數(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ù)
<el-input v-model="model" v-number-input.float="2" />

支持負數(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
<el-input v-model="model" v-number-input="{ min: 0 }" />

結語

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

一文詳析vue3?Props的用法(父傳子)
這篇文章主要給大家介紹了關于vue3?Props的用法(父傳子)的相關資料,在Vue3中Props用于組件間數(shù)據(jù)傳遞,允許類型檢查和默認值設置,文中將用法介紹的非常詳細,需要的朋友可以參考下
2024-10-10
vue中watch監(jiān)聽對象中某個屬性的方法
watch 的用法有個特點，就是當值第一次綁定的時候，不會執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會執(zhí)行，如果我們需要在最初綁定值得時候也執(zhí)行函數(shù)，就需要用到 immediate 屬性，這篇文章主要介紹了vue中watch監(jiān)聽對象中某個屬性的方法,需要的朋友可以參考下
2023-04-04
Vue3?實現(xiàn)驗證碼倒計時功能
這篇文章主要介紹了Vue3?實現(xiàn)驗證碼倒計時功能，倒計時的運用場景是獲取手機驗證碼倒計時、獲取郵箱驗證碼倒計時等場景，本文結合示例代碼給大家詳細講解，需要的朋友可以參考下
2023-01-01
深入理解Vue router的部分高級用法
這篇文章主要介紹了Vue router的部分高級用法，主要是針對已經有初步了解Vue-router的人，通過本文主要給大家介紹路由元信息，滾動行為以及路由懶加載這幾個的使用方法。感興趣的朋友一起看看吧
2018-08-08
vue中如何實現(xiàn)變量和字符串拼接
這篇文章主要介紹了vue中如何實現(xiàn)變量和字符串拼接，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
一文詳解Vue Router的使用和路由守衛(wèi)
Vue Router 是 Vue.js 的官方路由庫,用于在 Vue 應用中實現(xiàn)單頁面應用（SPA）的客戶端路由,以下是 Vue Router 的詳細介紹,包括基本概念、配置、路由導航以及高級用法,感興趣的小伙伴跟著小編一起來看看吧
2024-08-08
Vuejs第十篇之vuejs父子組件通信
這篇文章主要介紹了Vuejs第十篇之vuejs父子組件通信的相關資料,本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
vue.js單頁面應用實例的簡單實現(xiàn)
本篇文章主要介紹了vue.js單頁面應用實例的簡單實現(xiàn)，使用單頁應用，沒有頁面切換，就沒有白屏阻塞，可以大大提高 H5 的性能，達到接近原生的流暢體驗。
2017-04-04
vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案
這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01
VUE腳手架具體使用方法
這篇文章主要介紹了VUE腳手架具體使用方法，vue-cli這個構建工具大大降低了webpack的使用難度，小編覺得不錯，下面就一起來了解一下具體使用方法
2019-05-05