金额输入框封装（千分位，禁止中文输入）
Created At :
Views 👀 :
局部自定义指令v-money
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
| 使用： v-money可输入两位小数 v-money.int整数
<el-input v-money.int v-model="inputVal"></el-input>
directives: {
money: {
bind(el, binding) {
el = el.children[0];获取到el-input输入框dom
let type = binding.modifiers //自定义指令参数
function format(n) {
if (!n) return n;
if (Number(n) == 0 || n == '.') return '';//只输入0、.清空输入框
let str = n.split('.');
let re = /\d{1,3}(?=(\d{3})+$)/g;
let n1 = str[0].replace(re, "$&,");//千分位
if (type.int) return n1;//若不需要补小数点、补零
if (str.length > 1 && str[1]) {
//已输入一位小数，补一位0
str[1].length === 1 ? str[1] = str[1] + '0' : str[1]
}
return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`;
}
//去除千分位中的‘，’
function unformat(num) {
if (!num) return num;
num = num.toString();
num = num.replace(/,/gi, '');
let str = num.split('.');
if (type.int) return num;
//有小数为00，聚焦自动去除
if (str.length > 1) {
str[1] == '00' ? num = str[0] : num
} else {
num = num
}
return num;
}
el.addEventListener('focus', function (e) {
let inputVal = e.target.value || '';
e.target.value = unformat(inputVal)
//解决ie重新聚焦输入框，光标在最前方bug
el.setSelectionRange(e.target.value.length, e.target.value.length);
})
el.addEventListener('blur', function (e) {
e.target.value = format(e.target.value);
})
//当用户使用拼音输入法开始输入汉字时，compositionstart事件就会被触发，输入过程中不会再触发
el.addEventListener('compositionstart', function (e) {
e.target.isNeedPrevent = true;
})
//当文本段落的组成完成或取消时, compositionend 事件将被触发。
el.addEventListener('compositionend', function (e) {
e.target.isNeedPrevent = false;
})
el.addEventListener('input', function (e) {
//setTimeout+compositionstart+compositionend解决输入法为中文时，每输入拼音都会触发事件、 且会删除已经输入的正确内容的bug
setTimeout(() => {
if (e.target.isNeedPrevent) return;
let reg
if (type.int) {
reg = /[^\d]/g
} else {
reg = /[^\d.]/g
}
let str = e.target.value
str = str.replace(reg, '')
e.target.value = str
})
})
el.addEventListener('keypress', function (e) {
if (e.target.value == '' && e.key === '.') {//首位禁止输入.
e.preventDefault()
}
//注：这里的正则reg必须在本function内部声明。直接写在bind下会导致每第二次输入错误字符可 以正常输入
let reg
if (type.int) {
reg = /[^\d]/g
} else {
reg = /[^\d.]/g
}
if (reg.test(e.key)) {
e.preventDefault()
}
if (e.target.value.indexOf('.') > -1) {
let str = e.target.value.split('.')
//如果已经存在小数点，禁止再次输入
//已经存在两位小数，禁止继续输入
if (e.key === '.' || str[1].length >= 2) {
e.preventDefault()
}
}
})
}
}
}
|
---