在開發過程中,基本都遇到過需要限制輸入的情況,比如金額、僅字母數字、可輸入小數位等,網上搜了很多方法也遇到一些坑,是以我把自己用的一些方法分享出來,希望對有需要的人有所幫助。
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.js
const 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]) || null
if (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)
break
case 'integerLetter':
integerLetterFilter(el)
break
default:
console.warn('未知指令類型',binding.arg)
break
}
}
}
注冊全局自定義指令
//main.js
import 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'))
})
}
···
本文完〜