需求
如果想要实现input输入Number类型，又不想用难看的type='number’怎么处理
1
2
| <el-input style="width:200px" :maxlength="4" @keyup.native="isNumber(form,'recruitsCount')" v-model.number="form.recruitsCount" placeholder="请输入数字，不能为空"></el-input>
|
1
2
3
4
5
6
7
8
9
| isNumber(obj,key) {
let isnumber = new RegExp('^[0-9]\\d*$')
if (!isnumber.test(obj[key])) {
obj[key] = null
} else {
return true
}
},
|
测试代码
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<input style="width:200px" :maxlength="4" @keyup="isNumber(form,'count')" v-model.number="form.count" placeholder="请输入数字，不能为空"></input>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
form: {
count: null
}
},
methods: {
isNumber(obj, key) {
let isnumber = new RegExp('^[0-9]\\d*$')
if (!isnumber.test(obj[key])) {
obj[key] = null
} else {
return true
}
}
}
})
</script>
</html>
|
说明
- 配合.number修饰符实现纯数字输入
- .nmber的特点是将字符串转为num型，如果转换结果是NaN，则原样输出。
- 因此如果第一个字符输入非数字，那么就会变成字符串，根据强制类型转换规则，首字母是数字才能转换成功，如1f这种就会转换为1，因此就出现预想中的输入非数字转换为数字的效果。
- 因此关键是第一个字符不能为非数字，配合keyUp事件，检测首字母是否是数字即可，检查全部也无所谓，因为keyup事件发生时，input事件未发生，input又经过类型转换，因此能完美运行
