Vue中實現輸入框Input輸入格式限制

1、使用修飾符實現數字輸入

在VUE中可以在v-modal后添加修飾符的形式來限制輸入，比如：

<input v-model.number="testValue" type="number">

.number可以實現限制數字輸入，但是會有以下問題：

會出現type="number"自帶樣式，當然可以通過添加以下css清除

/* 普通IE瀏覽器 樣式清除 */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none !important; } /* 火狐瀏覽器樣式清除 */ input[type="number"]{-moz-appearance:textfield; }

可以無限輸入特殊符號±.，會導致清空data中的值testValue

這里的修飾符也無法實現定制限制輸入，不能滿足要求

2、監聽輸入框變化

通過@input監聽更新數據，實現只能輸入數字，而且可以自行定制限制輸入內容

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

此方法可以滿足需求，但是無法封裝進行批量使用。

3、封裝全局指令

封裝input限制輸入指令。

//input.jsconst addListener = function(el, type, fn) {el.addEventListener(type, fn, false) }//去掉空格 const spaceFilter = function(el) {addListener(el, 'input', () => {el.value = el.value.replace(/\s+/, '')}) }// 限制只能輸入整數和小數（適用于價格類、最多兩位小數） const priceFilter = function(el) {addListener(el, 'input', () => {el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || nullif (isNaN(el.value)) {el.value = ''}}) }// 限制只能輸入字母數字（適用于運單號） const integerLetterFilter = function(el) {addListener(el, 'input', () => {el.value = el.value.replace(/[\W]/g,'')el.dispatchEvent(new Event('input'))}) }export default {bind(el, binding) {if (el.tagName.toLowerCase() !== 'input') {el = el.getElementsByTagName('input')[0]}spaceFilter(el)switch (binding.arg) {case 'price':priceFilter(el)breakcase 'integerLetter':integerLetterFilter(el)breakdefault:console.warn('未知指令類型',binding.arg)break}} }

注冊全局自定義指令

//main.jsimport inputFilter from '@/directives/InputFilter.js'vue.directive('inputFilter', inputFilter)

使用v-input-filter指令

<input v-modal="testValue" v-input-filter:price>

這樣封裝在使用時會出現一個隱蔽的bug，就是在輸入指令中正則限制以外的字符時，視圖中輸入框顯示是正確的，但是在瀏覽器控制欄Vue Devtools中的testValue最后一位字符是最后輸入的時的字符。

比如輸入abc、123abc輸入框內是 、123，但實際testValue值是c、123c。

原因是vue中綁定的值是通過監聽input進行賦值的，直接修改輸入框值不會觸發input事件，需要通過dispatchEvent再次手動觸發input事件，但是在監聽的input回調中再觸發input會無限循環，所以調整為監聽keyup事件來修改值，修改如下:

//input.js ··· // 防抖 let debounce = (fn, delay) => { var delay = delay || 300; var timer; return function() { var th = this; var args = arguments; if (timer) {clearTimeout(timer);}timer = setTimeout(function() {timer = null;fn.apply(th, args);}, delay);}; } // 限制只能輸入整數和小數（適用于價格類、最多兩位小數） const priceFilter = function(el) {addListener(el, 'keyup', debounce(() => {//添加防抖 方便添加小數點el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null if (isNaN(el.value)) {el.value = ''} //格式化去掉卻沒有輸入小數位的小數點el.value = +el.value //觸發input事件el.dispatchEvent(new Event('input'))})) } // 限制只能輸入字母數字（適用于運單號） const integerLetterFilter = function(el) {addListener(el, 'keyup', () => {el.value = el.value.replace(/[\W]/g,'')el.dispatchEvent(new Event('input'))}) } ···

總結

以上是生活随笔為你收集整理的Vue中实现输入框Input输入格式限制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。