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

方法挺简单的

<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/

/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

<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>

最后

以上就是飞快超短裙为你收集整理的vue ivew的input type=“number” 只能输入数字，解决输入法问题导致输入字母且去右侧上下箭头按钮完美解决方法的全部内容，希望文章能够帮你解决vue ivew的input type=“number” 只能输入数字，解决输入法问题导致输入字母且去右侧上下箭头按钮完美解决方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。