vue ivew的input type=“number” 只能输入数字，解决输入法问题导致输入字母且去右侧上下箭头按钮完美解决方法

128 阅读 0 评论 85 点赞

我是靠谱客的博主飞快超短裙，这篇文章主要介绍vue ivew的input type=“number” 只能输入数字，解决输入法问题导致输入字母且去右侧上下箭头按钮完美解决方法，现在分享给大家，希望可以做个参考。

方法挺简单的

复制代码

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
<template>
<Input v-model="value" placeholder="微信内部号码" type="number" number="true" class="aaaa"
:maxlength="20" clearable style="width:80%;ime-mode:Disabled" @on-keydown="changeaa(event)">
<span slot="prepend">微信</span>
</Input>
</template>
<script>
export default {
data () {
return {
value: ''
}
},
methods:{
changeaa(event){
//禁止非数字字符输入
if(event.keyCode<48||event.keyCode>57)event.returnValue=false;
}
}
}
</script>
<style>
.aaaa input::-webkit-outer-spin-button,
.aaaa input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.aaaa input[type="number"] {
-moz-appearance: textfield;
}
</style>

input type="number"很重要，防止中文输入法输入出现错误问题，如果右侧上下箭头没有去掉，请试着加下/deep/

复制代码

1
2
3
4
5
6
7
/deep/.aaaa input::-webkit-outer-spin-button,
/deep/.aaaa input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/deep/.aaaa input[type="number"] {
-moz-appearance: textfield;
}

如果获取不到event，请试下$event

复制代码

1
2
3
4
5
6
<template>
<Input v-model="value" placeholder="微信内部号码" type="number" number="true" class="aaaa"
:maxlength="20" clearable style="width:80%;ime-mode:Disabled" @on-keydown="changeaa($event)">
<span slot="prepend">微信</span>
</Input>
</template>